Is there a way to replace the ENTIRE contents of an iframe using Javascript (or Jquery)?
For example if my iframe had the following content...
blah outside of html
<html>
<head>
</head>
<body>
<h1> my title </h1>
</body>
</html>
blah outside of html
..It could all be replaced by your script :)
The best that I've seen so far is this:
$(youriframe).contents().find('html').html('your content here');
but that still wouldn't replace the content outside of the html tags. We have an interesting scenario where we must assure that ALL the content is replaced.
OR a new iframe with fresh content is created and simply replaces the previous iframe.
Please no comments about the src attribute.
I am having the same issue, and if i use the code like this:
$(youriframe).contents().find('html').html('your content here');
It works fine in Chrome or FireFox, but in IE8, nothing will be showed or the scroll bar in iframe won't appear.
If i use Rachel's method, the iframe content will be like this in all browsers:
<iframe>
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
is there any other solution?
Tried this one:
var doc = document.getElementById(iframeId).contentWindow.document;
doc.open();
doc.write(iframeContent);
doc.close();
this works on my case, both ie8 and FF/chrome.
I'm guessing that you're not having problems with cross-site scripting in this instance... Have you had any luck using contentWindow? Something like this seems to work well enough for me:
iframe = document.getElementById('iframe_id');
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(new_content_here);
Not my idea, found it here: Write elements into a child iframe using Javascript or jQuery
have a similar scenario, where I am generating a new iFrame with content from a different domain each time the row of a table is clicked.
To do this, I use jQuery AJAX and PHP. PHP looks at my MySQL table and gets the URL of the iFrame I want to load; it generates the HTML for an iFrame, and I use jQuery AJAX to replace that content.
My HTML looks something like this:
<div class="xFrame">
<iframe id="xFrameWindow" name="xFrameWindow" src=""></iframe>
</div>
And my AJAX call looks like this:
function loadPage(record_id) {
$.ajax({
type: "POST",
url: "php/ajax_handler.php",
data: "action=makeIFrame&record_id=" + record_id,
success: function(msg){
$('.xFrame' ).html(msg);
}
});
}
The code replaces the HTML of the div that contains the iFrame with a new iFrame.
Hope this (or something similar) works for you.