CODEWITHSUNDEEP
javascriptjquerydomsimplemodal
jrotello
jrotello

Reputation: 4601

How do I prevent an Iframe from re-loading when adding it to the document?

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>

Upvotes: 2

Views: 1702

Answers (5)

Jorge
Jorge

Reputation: 842

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.

Upvotes: 1

Ben
Ben

Reputation: 21249

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.

Upvotes: 0

Richard Atterfalk
Richard Atterfalk

Reputation: 472

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.

Upvotes: 0

Zikes
Zikes

Reputation: 5886

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;. 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.

Upvotes: 0

Jacob
Jacob

Reputation: 78920

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.

Upvotes: 0

Related Questions