Yes, you can. The key here is to just treat the Iframe like it's a browser window/tab in it's own right.
Consider the following excerpt of html - code that is displayed inside the iframe.
-iFrameSrc.html---------------------------------------------------------
Javascript:
function changeSrc()
{
var oiFrame = document.getElementById('mIframe');
oiFrame.src = 'index.php';
}
function changeSrc2()
{
window.location = 'index.php';
}
HTML:
<body>
Contents of Iframe
<button onclick='changeSrc2();'>Change iFrame src</button>
</body>
-whatever.html------------------------------------------------------------------
Now, consider the following excerpt - code that contains the iframe
HTML:
<iframe id='mIframe' src='iFrameSrc.html'/>
The first function,
changeSrc will do nothing there - the first line of code returns null. You obviously can't set the src attribute of null.
The second function will change the src attribute of the iframe found in whatever.html. You'll notice that if you just type iframeSrc.html into the browsers address-bar, you'll get the page in the whole window. Clicking the button will change the displayed address _and_ displayed content. The point is, the code for changing the url is the same, whether the page is displayed as is or if the page is shown inside an iframe.
However, we can still make the
changeSrc function work. But we have to remove it from iFrameSrc.html and paste it into whatever.html.
You can change the src of an iframe - both from within the iframe and from outside of it. You just have to go about it differently in each case.
changeSrc will do so from outside.
changeSrc2 will do it from inside.
Submit an article or tip