如何防止Iframe在添加到文档时重新加载？

问题描述：

我们使用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>

答

而不是创建自那就是页面上的元素的模式，你可以从一个HTML创建串。这样，插件不必从文档中移除iframe，将其放入模式中，然后在模式关闭后将其移回。

答

我能想到的唯一技巧就是将iframe添加到body元素并将其设置为display:none; position:absolute;。然后将一个占位符元素插入到simplemodal中，并在显示模式时使iframe可见并将其位置更改为占位符（也与高度和宽度匹配）。

它可能需要摆弄z-index等等，但是这意味着你不需要追加/前置/否则改变DOM，从而防止重新加载。

答

我可以另外推荐你使用div + AJAX。对我来说，iframe工作得更好，而且您不必同时设置iframe和辅助页面的样式。我不知道这是否适合您的需要，但我建议您至少检查一下。

答

这可能无法解决您的问题，但值得一试..您不需要在prependTo之前调用remove。

prependTo将有效地将其从当前位置取出并重新附加到DOM中的其他位置。它不会复制它，所以你不需要“删除”原来的

也许这会阻止iframe重新加载。

虽然，我赞同@ Ryuu的回答，不用担心iframes是最好的选择。

不幸的是，这仍然导致iframe重新加载。我们被绑定到iframe，直到我们能够经历更大的努力。我们正在与一个长期运行的代码库合作。（还是）感谢你的建议。 – jrotello 2011-03-25 17:46:53

答

我认为这是不可能的，如果你使用remove（）。但也许你可以尝试其他方式，比如改变其大小，显示：none，opacity：0，visibility：hidden或其他。你试过detach（）吗？在jQuery文档中说：要删除元素而不删除数据和事件，请改用.detach（）。

如何防止Iframe在添加到文档时重新加载？

相关推荐