0

I have the following layout

 _______________________________________________________
| iframe                                                |
| ______  _____________________________________  ______ |
|| menu ||info                                 ||advert||
||      ||                                     ||      ||
||      ||                                     ||      ||
||      ||                                     ||      ||
||      ||                                     ||      ||

I have read many pages of answers and they all seem to say the same things, but i still can't get my code to work.

I want links in my MENU to change the iframe, which will load new topics each with their own menu. Also some pages in my INFO box need to change the source of the iframe.

An example is when I want to log out of my account and return to my homepage: I hit LOGOUT on the MENU, which loads logout.php into INFO and nulls all variables followed by this ...

<script type="text/javascript">
    top.document.getElementById('iframeid').src='home.php';
</script>

I have also tried (and variations of)

document.getElementById('iframeid').src='home.php';
parent.document.getElementById('iframeid').src='home.php';
top.document.getElementById('iframeid').location='home.php';
top.document.getElementById('iframeid').location='WEBSITE/home.php';

It looks like such a simple thing, but I have now spent over 24 hours on this - any clues please?

Lior Elrom
  • 19,660
  • 16
  • 80
  • 92
Blackwolf
  • 93
  • 1
  • 12

3 Answers3

1

You may change the src value of the iframe.

example: https://jsfiddle.net/0g4uoymt/1/

setTimeout(function(){
    $("iframe").attr("src", "https://i.imgur.com/eMPOYrO.webm");
}, 1000);
woverton
  • 441
  • 1
  • 3
  • 12
  • May be instead of random 1000 miliseconds wait we can check when iframe loaded to be more reliable. http://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content – cjmling Aug 26 '15 at 11:39
  • This was just an example of changing an iframe, the timeout is just so you can see the change – woverton Aug 26 '15 at 12:26
  • Oh sorry, I misunderstood. I thought OP wanted to do something inside of iframe :S – cjmling Aug 26 '15 at 15:37
1

you can do it via iframe.src = 'home.php'. But you need to make sure you execute your JS code is executed after the "onload" event. 

window.onload = function() {
  ...
}

See this fiddle for an example.

Wachiwi
  • 312
  • 5
  • 15
  • this didn't seem to make a difference :( – Blackwolf Aug 26 '15 at 11:50
  • @Blackwolf in my fiddle it works for me to modify the src attribute. Does it work for you? Are you trying to access your the iframe src from inside the iframe via JS? – Wachiwi Aug 26 '15 at 15:14
  • yes @ accessing iframe from within with JS - is this bad ? – Blackwolf Aug 26 '15 at 20:20
  • yes it won't work because of of the [Same-origin-policy](https://en.wikipedia.org/wiki/Same-origin_policy). Basically you have two different websites. So you cannot access anything in the inside from outside or the other way. – Wachiwi Aug 26 '15 at 20:38
  • I asked google and perhaps [this](http://www.dyn-web.com/tutorials/iframes/) link can help you. – Wachiwi Aug 26 '15 at 20:44
  • this is using the same website, even the same folder for the sources of the pages – Blackwolf Aug 27 '15 at 00:10
  • Did you look at the link I posted above? Try to execute this code inside you iframed document: var ifrm = window.frameElement; ifrm.src = 'https://duckduckgo.com/'; – Wachiwi Aug 27 '15 at 06:02
0

OK, i've figured this out now - due to not being able to update the iframe containing the JS, i tried to update the parent iframe and this worked, so to overcome this practically, all i have done is generated a new iframe with the exact same attributes as this one and placed it behind. i can change the source of the new one and just include this functional iframe again at the beginning of each page - thank you for all your help guys. i hope this also helps other people

Blackwolf
  • 93
  • 1
  • 12