跨域設置iframe高度動態

我查了很多跨域iframe高度的例子，但沒有一個能夠解決問題。跨域設置iframe高度動態

我有一個簡單的HTML給出如下。我想根據內容的高度調整它內部的iframe大小。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


</head> 

<body > 
<table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1"> 
    <tr> 
    <td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0"> 
    </td> 
    </tr>  
    </table> 


     <iframe src="http://mywebapplication.com" width="100%" ></iframe 

     <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f"> 
     <tr> 
      <td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012. 


      </td> 
     </tr> 
     </table></td> 
    </tr> 
</table> 
</body> 
</html>

我有什麼用第二個JavaScript文件試圖

加入的iframe到的postMessage送回父。

HTML頁包含的iframe

<iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe> 
     <script type="text/javascript"> 
     var zino_resize = function (event) { 
      alert("sds"); 
      var zino_iframe = document.getElementById('zino_iframe'); 
       if (event.origin !== "http://hrcraft.noviavia.com") { 
       return; 
      } 
      //alert(zino_iframe); 
      if (zino_iframe) { 
       alert(event.data); 
       zino_iframe.style.height = event.data + "px"; 
      } 
     }; 
     if (window.addEventListener) { 
      window.addEventListener("message", zino_resize, false); 
     } else if (window.attachEvent) { 
      window.attachEvent("onmessage", zino_resize); 
     } 

window.addEventListener("message", myListener, false); 

function myListener(event) { 
    if (event.origin !== "http://hrcraft.noviavia.com") { 
     return; 
    } 
    //do something 
}

也被添加的mywebapplication的主頁上用於發送高度的函數。

我一直在下面這個例子

http://zinoui.com/blog/cross-domain-iframe-resize

來源

2015-10-14 tushar narang

iframe是否與父頁面位於同一個域中？ – www139

不，這就是爲什麼我提到跨域 –

該iframe包含一個完整的web應用程序，如就業門戶 –

雖然問題是關係到解決問題與OP自己的個人密碼。他們是一個久經考驗的庫，可以用來解決調整內容高度的iframe的問題。這個庫處理跨域，所以我認爲這是值得一提的。

https://davidjbradshaw.github.io/iframe-resizer/

你把兩個文件一個父一個在孩子（IFRAME）

在父

：

<style>iframe{width:100%}</style> 
<iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe> 
<script>iFrameResize({log:true})</script>

在你的孩子，你只需要添加這個文件：

iframeResizer.contentWindow.min.js

The lib rary負責調整大小並跨域。檢查文檔。

來源

2017-03-26 23:17:33 MartinWebb

謝謝你的幫助，我已更新。 – MartinWebb

我不知道爲什麼我的答案是贊成的，圖書館沒有做OP正在做什麼，但它是一個測試和使用的git回購。 – MartinWebb

跨域設置iframe高度動態

回答

相關問題