iFrame Resizer

在iframe resizer壓縮檔的js文件夾中,有兩個.js檔:第一個是iframeResizer.min.js 放在要嵌入iframe的頁面(parent)中,其設定方式如下(一般情況下你不需要傳遞任何參數即可實現自動高度,詳細參數請參考官網)。

 

   $('iframe')iFrameResize([{logtrue}]);

第二個是iframeResizer.contentWindow.min.js放在被崁入iframe的頁面(son)中去,只需要呼叫。


接下來是設定iframe標籤,是寬度必須是百分比,滾動設置為否(為了兼容性)。

  <iframe src=“http://yourserver.com/index.html” width=“100%” scrolling=“no”</iframe>

當然,也可以使用使用document.createElement來動態產生。

   var iframe = document.createElement('iframe');
   iframesetAttribute('src','http://yourserver.com/index.html'); 
   iframesetAttribute('width','100%'); 
   iframesetAttribute('滾動','不');
   document.bodyappendChild(iframe);

按照以上步驟,基本上能夠解決的iframe自動高度問題,且的iframe內容可跨網域。


https://jarontai.github.io/blog/2014/07/25/use-iframe-resizer/

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

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