最近工作中需要對一個舊項目進行改造，不得已使用了讓人頭疼的iframe，碰到的最大問題是沒有好的方法使其高度自適應。Google一番之后，發現iframe-resizer能夠比較好的解決這個問題，而且還支持跨域訪問（使用postMessage）。
在使用它之前，必須明確iframe resizer要求IE8+（firefox，chrome等自然沒有問題），如果你需要支持舊版本IE，請關掉本頁然后再去google。其次，iframe resizer提供了原生JS與jQuery插件兩種調用方式，而原生方式需要額外的配置，所以我推薦選擇jQuery插件方式（畢竟jQuery幾乎是標配了）。
OK，下載iframe resizer。
在iframe resizer壓縮包的js文件夾中，有兩個文件： 第一個js是：iframeResizer.min.js。這個js是要放在需要嵌入iframe的頁面（parent）中，其調用方式如下（一般情況下你不需要傳遞任何參數即可實現高度自適應，詳細參數請參考官網）：
$('iframe').iFrameResize([{log: true}]);第二個js是：iframeResizer.contentWindow.min.js，它需要放到你的iframe頁面(child)中去，注意只要引人，不需要代碼配置。
接下來是設置iframe，需要注意的是width必須是百分比，scrolling設置為no（為了兼容性）。
<iframe src="http://jarontai.github.io/blog/2014/07/25/use-iframe-resizer/"http://yourserver.com/index.html" width="100%" scrolling="no"></iframe>當然，你也可以使用document.createElement來動態創建它。
var iframe = document.createElement('iframe'); iframe.setAttribute('src', 'http://yourserver.com/index.html'); iframe.setAttribute('width', '100%'); iframe.setAttribute('scrolling', 'no'); document.body.appendChild(iframe);按照以上步驟設置，基本上就能夠解決iframe自適應問題，且iframe內容可跨域。