is there any way to change urls is iframe?

Question

I want to show a page of my website within iframe in another page. I mean you can see helper.html while you are navigation main.php. but I want to change some links in helper.html regarding to some conditions set in main.php.

The regular solution is to get content of helper.html and process it in main.php, then echo it. But it is server side, I want this process to be client side.

Is that possible with JavaScript?

Can you change the source code of both files? – Karolis Oct 02 '11 at 10:39 — Karolis, Oct 02 '11 at 10:39

score 2 · Answer 1 · answered Oct 02 '11 at 10:15

2

If your files are located at the same domain, you can use the top.frames property, ro refer to the window object of named frames:

Assume the top HTML to has such a structure:

<iframe name="main" /><iframe name="helper" />

Inside main:

top.frames["helper"].document.getElementById("linkID").href = "http://newlink.com";

If you're using AJAX, you can add the previously shown code in the callback handler. If main.php reloads on change, at the code within <script> tags.

answered Oct 02 '11 at 10:15

Rob W

315,396
71
752
644

The [Same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) prevents pages from a different domain from comunicating with each other. – Rob W Oct 02 '11 at 10:28

score 1 · Answer 2 · answered Oct 02 '11 at 10:09

1

Try this...

var myIframe = document.getElementById('SomeIFrame'); 
myIframe.src = 'www.joobworld.com';

answered Oct 02 '11 at 10:09

Pwaddles

142
5

this probably changes the src of iframe not the href s within the iframe – John Oct 02 '11 at 10:24

score 1 · Answer 3 · edited May 23 '17 at 10:34

Yes it is possible if both frames are in same domain. See sample function: in the help frame the id of link is assumed to be "link"

function ChangeLink()
{
    var Helpframe = document.getElementById("Helpframe");
    var innerDoc = Helpframe.contentDocument || Helpframe.contentWindow.document;
    var link = innerDoc.getElementById("link");
    link.href="http://www.google.com";
}

This solution is inspired from Javascript - Get element from within an iFrame

score 1 · Accepted Answer · answered Oct 02 '11 at 11:01

If those files are on different domains but you have a full control of them, then use the following solution:

In the main page call an iframe with GET parameters. For instance:

<iframe src="foo.html?parameter=value" width="400" height="500"></iframe>

In an iframe parse GET parameters using Javascript and show an appropriate content:

// get the current URL
var url = window.location.toString();
//get the parameters
url.match(/\?(.+)$/);
var params = RegExp.$1;
// split up the query string and store in an
// associative array
var params = params.split("&");
var queryStringList = {};

for(var i=0;i<params.length;i++)
{
    var tmp = params[i].split("=");
    queryStringList[tmp[0]] = unescape(tmp[1]);
}

// print all querystring in key value pairs
for(var i in queryStringList)
    document.write(i+" = "+queryStringList[i]+"<br/>");

Source: http://www.go4expert.com/forums/showthread.php?t=2163

Code provided in this answer will print the Query String Collection, but how come this is the accepted answer when question talks about changing the link location inside the IFrame? Also see questioner comment on @Pwaddles answer. — user961954, Oct 02 '11 at 18:28
@user961954 My answer explains how to pass data from the main page to an iframe. This data can be the information about urls that need to be replaced in an iframe. Then the iframe must have a script which parses the data and replaces needed urls. — Karolis, Oct 02 '11 at 19:10

is there any way to change urls is iframe?

4 Answers4