Question

我终于找到了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');">

有没有人有任何想法如何修改它，如果他们可以显示我将要修改的内容？

谢谢。

Answer 1

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

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

假设A的网址为http://foo.com，而网址的网址为http://bar.com。 B中没有脚本可以影响A. A中的脚本不会影响B中的页面。这是浏览器安全协议。

A可以对B做的唯一事情是影响src以有效地更改iframe中的页面。我们可以利用这个优势。

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

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);

Answer 2

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

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

自动调整iFrame大小

2 个答案: