• 您現(xiàn)在的位置： 創(chuàng)新互聯(lián) >> 網(wǎng)站建設(shè) >> 網(wǎng)絡(luò)建設(shè)常見問題 >> js中iframe載入后高度自適應(yīng)

js中iframe載入后高度自適應(yīng)

• 作者：曾小姐 文章來源：成都網(wǎng)站建設(shè) 點擊數(shù)：1421 更新時間：2012-06-12
• 　　本文章由成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)整理，分為兩部份來介紹，一是介紹關(guān)于iframe載入完畢的判斷介紹了關(guān)于iframe載入完成的判斷,然后根據(jù)判斷我再介紹載入完成后使iframe高度自適應(yīng)。
  關(guān)于iframe載入完畢的判斷介紹了關(guān)于iframe載入完成的判斷方法

  iframe中跨域載入頁面，在父級頁面由于跨域的限制是訪問不了加載頁面的window對象，也就調(diào)用不了子頁面中聲明的函數(shù)。
  因此在父級頁面中判斷iframe是否載入完畢最初的方式是使用參照元素載入完成的方式：

  代碼如下

  var loginiframe = document.createElement("iframe"); loginiframe.src = "http://login.hxsd.com/"; loginiframe.onload = function(){     alert("load"); } document.body.appendChild(loginiframe);

  但是上面這種方式在ie瀏覽器下在loginiframe加載完成后卻沒有響應(yīng)，對ie瀏覽器做了其他的處理:

  代碼如下

  var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1; var loginiframe = document.createElement("iframe"); loginiframe.src = "http://login.hxsd.com/"; if (isIE){     loginiframe.onreadystatechange = function(){  if (loginiframe.readyState == "complete"){      alert("load");  }     }; } else {     loginiframe.onload = function(){  alert("load");     }; } document.body.appendChild(loginiframe);

  問題解決后，通過閱讀《Iframes, onload, and document.domain》，在IE下對于iframe的onload的支持是隱性的，最終解決方式:

  代碼如下

  var loginiframe = document.createElement("iframe"); loginiframe.src = "http://login.hxsd.com/"; if (loginiframe.attachEvent){     loginiframe.attachEvent("onload", function(){      alert("load");     }); } else {     loginiframe.onload = function(){  alert("load");     }; } document.body.appendChild(loginiframe);

  
  下面是介紹載入完成后使iframe高度自適應(yīng)
  具體的實現(xiàn)代碼如下：

  代碼如下

  function loadFrame(oFrame, sFrameSrc) {     oFrame.src = sFrameSrc;     if (oFrame.attachEvent){         oFrame.attachEvent("onload", function(){             autoChangeFrameHeight(oFrame);         });     } else {         oFrame.onload = function(){             autoChangeFrameHeight(this);         };     } }   function autoChangeFrameHeight(oFrame) {     var nHeight = Math.max(oFrame.contentWindow.document.body.scrollHeight, oFrame.contentWindow.document.documentElement.scrollHeight);     oFrame.height = nHeight; }

  以上方法只適用于同域的鏈接，在iframe內(nèi)的內(nèi)容加載完成后會獲取iframe內(nèi)的高度賦值給iframe的高度
  對于跨域的情況，由于瀏覽器安全性的設(shè)置，不同域的頁面之間是不能通信的，解決的方法是需要通過在iframe調(diào)用的頁面中構(gòu)建一個與父級頁面同域的頁面，通過url的形式將子頁面的高度傳遞過去，具體代碼如下：
  子頁面中：

  代碼如下

  window.onload = function() {     var oFrame = document.createElement("iframe");     var nHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);     document.body.appendChild(oFrame);     oFrame.src = "http://PARENT_DOMAIN/agentFrame.html?height=" + nHeight;     oFrame.style.display = "none"; } 代

  理頁面中：

  代碼如下

  var nHeight = location.href.match(/?height=(d+)$/)[1]; window.top.document.getElementById("frame").height = nHeight;

  其中window.top為調(diào)用的最頂層窗口

• 上一篇文章：兒童對網(wǎng)站的真實需要
  下一篇文章：js判斷瀏覽器是否為IE瀏覽器