iframe大小自適應

前幾天，舍友去某互聯網公司面前端研發工程師。回來後，他就跟咱們聊了下面試官給他出的題。其中，有一道題是「如何實現iframe高度的自適應？」。好吧，我認可，我聽到iframe這個詞的第一反應就是：這個東西性能差、搜索引擎不友好等等。因爲這樣的偏見，還真沒有好好研究一下iframe。其實，iframe對於第三方的廣告插入仍是很是有用的。這兩天，好好研究了下iframe自適應的問題。研究的過程當中，利用nodejs搭建了簡單的服務器來測試方法的正確性。

同域下的iframe自適應

   同域下實現iframe自適應比較簡單，能夠直接利用javascript操做DOM來達到目的。下面的示例是在http://localhost:8887做用域下，iframe.html引入index.html。

   index.html

1	< img  src = "ghost.png"  alt = "ghost"  style = "width:600px; height: 300px;" >

   iframe.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

< iframe  id = "iframe"  src = "index.html"  frameborder = "0" scrolling = "no"  style = "border: 0px;" ></ iframe >    < script >      // 兼容性代碼    function autoHeight(iframe) {      if (iframe) {        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;        if (iframeWin.document.body) {          iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;          iframe.width = iframeWin.document.documentElement.scrollWidth || iframeWin.document.body.scrollWidth;        }      }    }    window.onload = function() {      autoHeight(document.getElementById('iframe'));    } </ script >

   顯示效果

   注意：必定要經過服務器來訪問iframe.html，像chrome這樣的瀏覽器訪問本地靜態文件會有限制，致使錯誤！

跨域下的iframe自適應

   跨域(只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域)的時候，因爲js的同源策略，父頁面內的js不能獲取到iframe頁面的大小。

   解決方案原理：使用代理頁面，並經過location.hash來進行傳值。

   示例以下：http://localhost:8887下的一個頁面a.html使用iframe標籤引入http://localhost:8888下的一個頁面b.html。在http://localhost:8887下建立一個agent.html頁面作代理，b.html此時可利用隱藏的iframe經過location.hash將本身的大小傳給agent.html。因爲agent.html與a.html在同一個域下，因此agent.html可直接操做a.html，不受js同源限制。

   a.html

1 2	// 引入b.html < iframe  id = "a_iframe"  src = "http://localhost:8888/b.html" frameborder = "0"  scrolling = "no"  style = "border: 0;" ></ iframe >

   b.html

1 2 3 4 5 6 7 8 9 10 11 12 13

< img  src = "ghost.png"  alt = "ghost"  style = "width:600px; height: 300px;" >    // 經過隱藏的iframe，利用loacation.hash傳值 < iframe  id = "b_iframe"  src = "http://localhost:8887/agent.html" height = "0"  width = "0"  frameborder = "0"  style = "display: none;" ></ iframe >    < script >    (function autoHeight() {      var width = Math.max(document.body.scrollWidth, document.body.clientWidth);      var height = Math.max(document.body.scrollHeight, document.body.clientHeight);      var b_iframe = document.getElementById("b_iframe");      b_iframe.src = b_iframe.src + "#" + width + "|" + height;    })(); </ script >

   agent.html

1 2 3 4 5 6 7 8 9 10

< script >    var a_iframe = window.parent.parent.document.getElementById("a_iframe");    var hash_url = window.location.hash;    if (hash_url.indexOf("#") >= 0) {      var hash_width = hash_url.split("#")[1].split("|")[0] + "px";      var hash_height = hash_url.split("#")[1].split("|")[1] + "px";      a_iframe.style.width = hash_width;      a_iframe.style.height = hash_height;    } </ script >

   顯示效果

   

結語