Question

我从其他来源获取此代码以在我的网站上使用

<!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文件时，我无法完全看到它。它只显示了这样的小部分。

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

enter image description here 任何想法如何修复我的代码以反映变化？这是使用的脚本。

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

编辑：我将文件上传到服务器，看看是否在浏览器本地打开文件时出现问题，即使上传到服务器后也无法正常工作。

Answer 1

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

所以，函数在那里结束，你永远不会声明iframe的高度。

Answer 2

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

经过深入的搜索和阅读后，我最终在这个帖子中

Ways to circumvent the same-origin policy

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

跨域iFrame调整问题大小

2 个答案: