How do I prevent an Iframe from re-loading when adding it to the document?
Question
We are using the simplemodal jquery plugin to host an iframe as the contents of the dialog. Upon closing the dialog, simplemodal removes the dialog content (an iframe wrapped in a div) from the document and then adds it back to the document.
The following markup demonstrates the problem while taking simplemodal out of the equation. I only mention simplemodal in this post for context as to why the iframe is removed and re-added.
How do I prevent the Iframe from reloading it's contents when it is re-added to the document?
Any help would be greatly appreciated!
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
iframe{ padding: 0px; margin: 0px; width: 300; height: 300; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#go").click(function() {
var frame = $("#myframe");
frame.remove();
frame.prependTo("body");
});
});
</script>
</head>
<body>
<iframe name="myframe" id="myframe" src="test2.html"></iframe>
<div>
<button id="go">GO</button>
</div>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("this should not get called when the iframe is re-added to the document");
});
</script>
</head>
<body>
This is iframe content.
</body>
</html>
5 answers
solution1
1 2012-05-02 13:47:03
I think that it is not possible if you use remove(). But maybe you could try other way, like changing its size, display:none, opacity:0, visibility:hidden or some other. Have you tried detach()?. In the jQuery documentation says: To remove the elements without removing data and events, use .detach() instead.
solution2
0 2011-03-22 19:37:27
Rather than creating the modal from an element that's on the page, you can create it from an HTML string. That way, the plugin doesn't have to remove the iframe from the document, put it in the modal, then move it back after the modal closes.
solution3
0 2011-03-22 19:39:17
The only trick I could think to do is to add the iframe to the body element and set it to display:none; position:absolute; display:none; position:absolute; . Then insert a placeholder element into the simplemodal, and when the modal is shown make the iframe visible and change its position to that of the placeholder (also matching height and width).
It may require fiddling with the z-index and such as well, but it would mean you won't have to append/prepend/otherwise alter the DOM, thus preventing a reload.
solution4
0 2011-03-22 22:32:47
I could otherwise recommend you using div + AJAX. Works much better for me then iframe and you don't have to style both the iframe and the secondary page. I don't know if this suits your need, but I recommend you checking up on it at least.
solution5
0 2011-03-22 22:36:44
That might not fix your problem but worth a try.. you don't need to call remove before prependTo.
prependTo will effectively take it out of its current spot and re-attach it somewhere else in the DOM. It doesn't copy it so you don't need to "remove" the original
Maybe that'll prevent the iframe from reloading.
Though, I do agree with @Ryuu's answer, don't bother with iframes at all is the best option.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.