爲什麼我的iframe不能調整大小以適合其內容？

我正在嘗試跨站點iframe調整大小，按照說明here，但iframe保持不變。我不確定我做錯了什麼。爲什麼我的iframe不能調整大小以適合其內容？

iframe當前駐留在http://ayeoui.com/testerpage.php。這會調用博客文章，然後在主要ayeoui.com域上加載一個「helper.html」頁面，理論上應該將信息傳遞迴第一頁並觸發調整大小。主站點上的代碼，這樣說：

<script> 
    // Resize iframe to full height 
    function resizeIframe(height) 
    { 
    // "+60" is a general rule of thumb to allow for differences in 
    // IE & and FF height reporting, can be adjusted as required.. 
    document.getElementById('iframeid').height = parseInt(height)+60; 
    } 
</script> 
<iframe id='iframeid' src='http://rinich.com/blog/11/index.html'></iframe>

反過來所鏈接的頁面有這個代碼寫在上面：

<body onload="iframeResizePipe()"> 
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe> 

<script type="text/javascript"> 
    function iframeResizePipe() 
    { 
// What's the page height? 
    var height = document.body.scrollHeight; 

    // Going to 'pipe' the data to the parent through the helpframe.. 
    var pipe = document.getElementById('helpframe'); 

    // Cachebuster a precaution here to stop browser caching interfering 
    pipe.src = 'http://www.ayeoui.com/helper.html?height='+height+'&cacheb='+Math.random(); 

    } 
</script>

最後，這導致我們的幫助頁面：

<html> 
<!-- 
This page is on the same domain as the parent, so can 
communicate with it to order the iframe window resizing 
to fit the content 
--> 
    <body onload="parentIframeResize()"> 
    <script> 
     // Tell the parent iframe what height the iframe needs to be 
     function parentIframeResize() 
     { 
     var height = getParam('height'); 
     // This works as our parent's parent is on our domain.. 
     parent.parent.resizeIframe(height); 
     } 

     // Helper function, parse param from request string 
     function getParam(name) 
     { 
     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
     var regexS = "[\\?&]"+name+"=([^&#]*)"; 
     var regex = new RegExp(regexS); 
     var results = regex.exec(window.location.href); 
     if(results == null) 
      return ""; 
     else 
      return results[1]; 
     } 
    </script> 
    </body> 
</html>

然而，測試儀頁面並沒有改變！顯然我做錯了什麼，但我不確定是什麼。發生了什麼？

來源

2012-09-20 user982244

innerWidth和innerHeight，或者只是innerHeight？ – user982244

just innerHeight –

用window.innerHeight替換document.body.scrollHeight;不用找了。 – user982244

-1

我不確定，但是這個可能是是原因：你得到一個same origin policy error。

在Chrome的開發工具的控制檯記錄此錯誤：Uncaught SecurityError: Blocked a frame with origin "http://www.ayeoui.com" from accessing a frame with origin "http://ayeoui.com". Protocols, domains, and ports must match.

這是因爲www.ayeoui.com訪問rinich.com。這是不允許的（why?）。

您可以嘗試確保從/到同一個域訪問的所有內容：ayeoui.com。

此外，在一個單獨的說明，你可能要考慮將seamless屬性您iframe，它只是讓一切看起來那麼多整潔（在我看來）：

<iframe id="iframeid" src="http://rinich.com/blog/11/index.html" seamless></iframe>

來源

2013-08-08 13:32:40

Uncaught SecurityError: Blocked a frame with origin "http://www.ayeoui.com" from accessing a frame with origin "http://ayeoui.com". Protocols, domains, and ports must match.

您的子域名不符。 http://www.ayeoui.com與http://ayeoui.com完全不同。

來源

2013-08-21 18:09:13 Andrew

檢查控制檯是否有未被捕獲的錯誤類型。您正在從一個頁面重定向到另一個頁面，但resizeIframe函數在第二頁上不起作用。您應該創建另一個.js文件並在鏈接該文件後調用該函數。這應該工作。

來源

2016-10-07 13:37:18 Drummmer

爲什麼我的iframe不能調整大小以適合其內容？

回答

相關問題