I have used an iframe which looks like this:
Just use the following code.
var iframe = document.getElementById('IFRAME ID'); // just for clarity
iframe .src = 'URL here';
It should work with every browser.
You can change the src of the iframe using two methods:
Both methods require that the iFrame be completely loaded before you attempt the modification.
Changing the href works in all browsers, including IE5. You can address the frame
By refering to the contentwindow of the element:
var myFrame = document.getElementById('myFrame'); myFrames.contentWindow.location = 'http://example.com';
By refering to the NAME of the element:
var myFrame = window.frames.myFrame; // where myFrame is the NAME of the element myFrame.location = 'http://example.com';
Changing the src is as said above, by selecting the element and changing the src - but it must be a child, not a descendant element.
var myFrame = document.getElementById('myFrame');
myFrame.src = 'http://example.com'
Note that if you are only changing the #anchor of the URL (i.e. changing from page.php#this to page.php#that) then IE won't refresh the page but Chrome and Firefox will. If this is your issue then you may want to add something random to your query string to make IE think it's a totally new page and force the reload.
For example (using jQuery):
var hash = 'yourHash';
var rand = 1 + Math.floor(Math.random() * 9999);
var helpUrl = 'page.php?rand=' + rand + '#' + hash;
$('#iframe').attr('src', helpUrl);
document.getElementById('MsgBoxWindow').getAttribute('src')
works in Internet Explorer, Firefox, Safari, to get the source URL.
document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain)
works on the same browsers to set the source URL.
However, the iframe must be loaded before calling. Don't place it before the iframe while calling the JavaScript code. You can place both after the iframe, if you are calling it right after the page load, and it will work as expected.
Since you've used the jquery tag this might be handy.
function resizeIframe(height) {
height = parseInt(height);
height += 100;
$('iframe#youriframeID').attr('height', height);
}
In case you are doing cross-browser resizing have a look at this post which explains how to automatically resize the height based on the iframes content. You will need access to the html of the iframed website. Resizing an iframe based on content
I've tried getElementById
and a lot of other variants. None worked the same on IE, FF, Opera, or Chrome.
This one works well: parent.frames.IFRAME_ID.location.href = '/';