Как предотвратить повторную загрузку Iframe при добавлении его в документ? - PullRequest
Новая
       20

Как предотвратить повторную загрузку Iframe при добавлении его в документ?

2 голосов
/ 22 марта 2011

Мы используем плагин simplemodal jquery для размещения iframe в качестве содержимого диалога. После закрытия диалога simplemodal удаляет содержимое диалога (iframe, заключенный в div) из документа, а затем добавляет его обратно в документ.

Следующая разметка демонстрирует проблему при извлечении simplemodal из уравнения. Я упоминаю simplemodal в этом посте только для контекста, почему iframe удаляется и повторно добавляется.

Как предотвратить повторную загрузку содержимого Iframe при его повторном добавлении в документ?

Любая помощь будет принята с благодарностью!

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 ]

1 голос
/ 02 мая 2012

Я думаю, что это невозможно, если вы используете remove (). Но, возможно, вы могли бы попробовать другой способ, например, изменить его размер, отображение: нет, прозрачность: 0, видимость: скрытый или какой-либо другой. Вы пробовали использовать detach ()? В документации jQuery говорится: Чтобы удалить элементы без удаления данных и событий, используйте вместо этого .detach ().

0 голосов
/ 23 марта 2011

Это может не решить вашу проблему, но стоит попробовать .. вам не нужно вызывать remove до prependTo.

prependTo эффективно вытащит его из текущего места и повторно присоединит в другом месте в DOM. Он не копирует его, поэтому вам не нужно «удалять» оригинал

Может быть, это предотвратит перезагрузку iframe.

Хотя, я согласен с ответом @ Ryuu, лучше не связываться с iframes.

0 голосов
/ 22 марта 2011

Единственный трюк, который я мог бы сделать, это добавить iframe к элементу body и установить его на display:none; position:absolute;.Затем вставьте элемент-заполнитель в простой модал, и, когда отображается модал, сделайте видимым iframe и измените его положение на положение заполнителя (также с учетом высоты и ширины).

Может потребоваться возиться с z-index и тому подобное, но это будет означать, что вам не придется добавлять / добавлять / иным образом изменять DOM, тем самым предотвращая перезагрузку.

0 голосов
/ 23 марта 2011

В противном случае я мог бы порекомендовать вам использовать div + AJAX.Работает намного лучше, чем iframe, и вам не нужно стилизовать как iframe, так и дополнительную страницу.Я не знаю, подходит ли это вам, но я рекомендую вам как минимум проверить.

0 голосов
/ 22 марта 2011

Вместо создания модального элемента из элемента, который находится на странице, вы можете создать его из строки HTML.Таким образом, плагину не нужно удалять iframe из документа, помещать его в модальное, а затем перемещать обратно после закрытия модального режима.

...