2011-03-22 89 views
2

我們使用simplemodal jquery插件來託管一個iframe作爲對話框的內容。關閉對話框後,simplemodal從文檔中刪除對話內容(包裝在div中的iframe),然後將其添加回文檔。如何防止Iframe在添加到文檔時重新加載?

下面的標記顯示了問題,同時從等式中取出簡單的模式。我只在這篇文章中提到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> 

回答

0

而不是創建自那就是頁面上的元素的模式,你可以從一個HTML創建串。這樣,插件不必從文檔中移除iframe,將其放入模式中,然後在模式關閉後將其移回。

0

我能想到的唯一技巧就是將iframe添加到body元素並將其設置爲display:none; position:absolute;。然後將一個佔位符元素插入到simplemodal中,並在顯示模式時使iframe可見並將其位置更改爲佔位符(也與高度和寬度匹配)。

它可能需要擺弄z-index等等,但是這意味着你不需要追加/前置/否則改變DOM,從而防止重新加載。

0

我可以另外推薦你使用div + AJAX。對我來說,iframe工作得更好,而且您不必同時設置iframe和輔助頁面的樣式。我不知道這是否適合您的需要,但我建議您至少檢查一下。

0

這可能無法解決您的問題,但值得一試..您不需要在prependTo之前調用remove。

prependTo將有效地將其從當前位置取出並重新附加到DOM中的其他位置。它不會複製它,所以你不需要「刪除」原來的

也許這會阻止iframe重新加載。

雖然,我贊同@ Ryuu的回答,不用擔心iframes是最好的選擇。

+0

不幸的是,這仍然導致iframe重新加載。我們被綁定到iframe,直到我們能夠經歷更大的努力。我們正在與一個長期運行的代碼庫合作。 (還是)感謝你的建議。 – jrotello 2011-03-25 17:46:53

1

我認爲這是不可能的,如果你使用remove()。 但也許你可以嘗試其他方式,比如改變其大小,顯示:none,opacity:0,visibility:hidden或其他。 你試過detach()嗎?在jQuery文檔中說: 要刪除元素而不刪除數據和事件,請改用.detach()。