跨域 iFrame 调整大小问题答案

【问题标题】：Crossdomain iFrame resize issues跨域 iFrame 调整大小问题
【发布时间】：2014-08-30 06:52:35
【问题描述】：

我从另一个来源获得此代码，以便在我的网站上使用，

<!DOCTYPE html>
<html>
    <head>
        <script src="http://domain-name.co.uk/js/theirscript.js"></script> 
    </head>
    <body>
        <iframe src='http://domain-name.co.uk/quote/quote_0.numo?id=mySplID' id="ifHolderQuote" width="660" frameBorder="0" marginwidth="0" marginheight="0" scrolling="no" allowTransparency="true" onload="resizeCrossDomainIframe('ifHolderQuote', 'http://mySplDomain.co.uk');">
        </iframe>
    </body>
</html>

但由于某种原因，当我使用浏览器查看纯 HTML 文件时，我无法完全看到它。它只显示这样的一小部分。

但是在他们网站上传的实际测试文件中，我可以查看完整的 iFrame。

知道如何修复我的代码以反映更改吗？这是使用的脚本。

  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) + 40; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  }

编辑：我将文件上传到服务器，看看从浏览器本地打开它是否有问题，即使上传到服务器后它也不起作用。

【问题讨论】：

标签： javascript html iframe

【解决方案1】：

很好地发现这是一个安全问题。我使用的 iFrame 不允许运行跨域源脚本。由于我使用的是其他域中的 Frame，并将其放在我的域中导致 Moziall/许多其他流行浏览器建立的源策略的差异。

经过大量的搜索和阅读，我最终找到了这个帖子，

Ways to circumvent the same-origin policy

所以我正在努力纠正这个问题；使用 CORS 请求。可能非常有趣。

【讨论】：

【解决方案2】：

条件event.origin !== other_domain 在您的计算机上查看时始终为真，因为您在 URL 中没有域，因为浏览器使用file:/// 协议打开文件。

所以，函数到此结束，您永远不会声明 iframe 的高度。

【讨论】：

抱歉，我还应该补充一下，看看这样的问题是否会成为问题，我什至将文件上传到域，但它仍然没有按照我想要的方式出现。感谢您的回复。
这就是我想说的，如果你把它上传到服务器......它将有一个域并且脚本可以工作，但如果你从你的计算机运行它就不行，因为@ 987654323@ 不是 URL，也没有域。
我还把脚本放在了 head 标签内，为了调试，我添加了一条警告语句来显示传递的域，它给出了我的域名，然后我在 If (event.origin 行，它从未出现过。所以我有一种奇怪的感觉，该函数甚至从未被调用过？？
你没有得到它:(。让我直截了当地说：当你从你的计算机（而不是服务器）运行它时。event.origin 和 other_domain 的值是什么？
我明白你的意思！我现在已将文件上传到服务器，将我的脚本标签更改为（我将在下一条评论中发布）。它显示了第一个警报 - My-Domain.co.uk。接下来的两个警报根本没有出现......