Question

是否可以使用iframe中加载的文档替换浏览器窗口（_top frame）的内容，而无需发出新的GET来加载该文档？

这样的事情：

<html>
<head>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
  $("#link").click(function() {
    // should present in the browser window the content of the iframe WITHOUT reload
    // even preserve javascript/head code
    $(document).html($("#frameDestination").html());
  });
});
</script>
</head>
<body>
<a id="link" href="#">full window</a>
<iframe id="frameDestination" src="http://www.some-random-site.com" width="900px" height="500px"></iframe>
</body>
</html>

Answer 1

在jQuery中使用iframe时使用contents（）。

$("#YourIframe").contents().find("html").html();

如果iframe与父母一起位于相同的域，则仅才能生效。

Answer 2

我没有测试过跨域，但是在同一个域上我有这个脚本工作：

$(document).ready(function() {
  $("#link").click(function() {
    var iframeBody = document.getElementById("frameDestination").contentDocument,
    head = iframeBody['head'].innerHTML, 
    body = iframeBody['body'].innerHTML;
    $('body').html( body );
    $('head').html( head );
  });
});

在最新的Firefox中，我甚至可以在框架中的脚本标记中设置变量，并在单击链接后在_top中查看该值。

使用iframe的内容替换_top窗口的内容而不重新加载页面

2 个答案: