Change URL in an iframe using javascript

Question

I have a in an iframe, that calls a function from the parent page. The function is window.location, however this does not change the url. Is there a way to have the iframe call a function from the parent page, that will cause the iframe to change url? I also had a basic qustion, if I have an iframe, and click on a link that brings me to a new page, does the parent page remain open?

Thanks in advance for your help. Sorry if I sound like a complete idiot, I am new to javascript.

Dave

Dani · Accepted Answer · 2016-03-29 11:46:56Z

22

window.location is not a function, it s an object.

To do what you want, first make the iframe call a special function from it's parent.

parent.sendMeToGoogle();

And in the function (in parent) do something like:

function sendMeToGoogle(){
    document.getElementById('iframeID').src="http://google.com/";
}

edited Mar 29, 2016 at 11:46

Dani

4,2647 gold badges58 silver badges126 bronze badges

answered Aug 12, 2011 at 6:59

Christian

28.3k18 gold badges117 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave Smith Over a year ago

Hi Christian,Thanks for your reply. I understand everything except ('theiframe') what value goes their?

Dave Smith Over a year ago

Hi Christian, thanks for your help. It still doesn't seem to work for me. Here's what i have for the parent page: <html> <head> <iframe src="zaazoo.thewebbusters.com/button.html" id="theiframe" width="760" height="500" frameborder="0" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </head> <body> <script type="text/javascript"> function sendMeToGoogle(){ document.getElementId('theiframe').src="google.com"; } } </script> </body> </html>

Dave Smith Over a year ago

And here's what I have for the child page: <html> <head> </head> <body> <div style=" position: absolute; left:80; top: 35;"> <input type="button" onclick="parent.sendMeToGoogle()" value="Next"> </div> </body> <html>

Christian Over a year ago

Try top instead of parent.

iamnicoj · Accepted Answer · 2014-02-18 21:26:03Z

8

If what you really need is to change the parent URL, you can use window.top.location.href='http://anotherURL.com' even if they are in different domains, from the iframe page.

answered Feb 18, 2014 at 21:26

iamnicoj

5059 silver badges13 bronze badges

Comments

Steven · Accepted Answer · 2011-08-13 10:08:31Z

0

I assume that you want to do more in the function of your parent page; if not you can just change the url of the iframe without calling the parent of course...

As for your second question, the iframe behaves like an ebmedded page: you can browse all you want in the iframe without affecting the parent (except of course with javascript calls like the one you want to use), but browse with the parent page and you will lose teh iframe as well. Hope that was the explanation you were looking for :)

answered Aug 13, 2011 at 10:08

Steven

2,4775 gold badges32 silver badges41 bronze badges

2 Comments

Dave Smith Over a year ago

Hi Steven, thanks for your reply. Ultimately what Ii am trying to do is have a parent page with an iframe. The ifrmae will link to different pages that all link back to the initial iframe url. Each time the initial ifram url loads into the iframe, I want it to add one value to a variable that is in the oarent page, when that variable reaches ten, I want the either the iframe, or the parent page to redirect to a new url

Steven Over a year ago

Hi Dave. You can indeed do this the way you are trying. Everytime the initial page loads, you do a javascript call to the parent. The value on the parent page will not be erased when you change pages in the iframe.

Collectives™ on Stack Overflow

Change URL in an iframe using javascript

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related