1

我终于搞定了 iframe 的跨域功能。我现在遇到的问题是第一页很长。当您单击 iframe 中的链接到较小页面时，iframe 不会自动调整大小，并且您在前一页高度的底部也有一个很大的间隙。

我正在使用的代码如下：

外部域上的代码：

<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
 <h3>Got post?</h3>
 <p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>

要显示 iframe 的主域上的代码：

<script type="text/javascript">
  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }
</script>

<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe"  onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">

有没有人有任何想法如何修改它，如果他们能展示我必须修改的内容？

谢谢你。

4

2 回答 2

0

首先，您必须问自己为什么要使用 iframe。如果您可以通过另一种方式（AJAX！）完成此操作，那可能是最好的。但是，我看到这个成功的唯一方法：

__________________
|A                |
|  ____________   |
|  |B          |  |
|  |           |  |
|  |  |C|      |  |
|  |___________|  |
|_________________|

假设 A 的 url 为http://foo.com， B 的 url 为http://bar.com。B 中的任何脚本都不能影响 A。A 中的任何脚本都不能影响 B 中的页面。这是浏览器安全协议。

A 可以对 B 做的唯一一件事就是影响 src 以有效地更改 iframe 中的页面。我们可以利用它来发挥我们的优势。

在 B 中创建一个新的 iframe (C)。C 需要来自与 A 相同的服务器，所以让我们给它一个http://foo.com/iframeheight.html. 将其放在 iframe B 的底部（在</body>iframe 页面上的之前）：

ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("src", "http://foo.com/iframeheight.html#" + document.documentElement.scrollHeight); 
ifrm.style.width = 0+"px"; 
ifrm.style.height = 0+"px"; 
document.body.appendChild(ifrm);

因为 A 和 C 的 URL 相同，所以浏览器会允许它们相互影响。http://foo.com/iframeheight.html应该包含一个函数来告诉 A 调整 B 的大小：

window.top.getElementById('my_iframe').height = window.location.hash.substring(1);
于 2012-11-01T14:41:41.410 回答
0

如果您从子域加载到 iframe，那么这可以避免“权限被拒绝”：

http://madskristensen.net/post/Iframe-cross-domain-JavaScript-calls.aspx

于 2012-12-13T19:51:57.253 回答