快捷導(dǎo)航

javascript 中iframe高度自適應(yīng)（同域）實(shí)例詳解

更新時(shí)間：2017年05月16日 14:45:30 投稿：lqh

這篇文章主要介紹了javascript 中iframe高度自適應(yīng)（同域）實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下

javascript 中iframe高度自適應(yīng)（同域）

今天解決了iframe高度自適應(yīng)的問(wèn)題，不過(guò)這只是同域下的頁(yè)面嵌入，以下是代碼：

function SetCwinHeight(){

     var iframeid = document.getElementById("frame");  //frame是iframe的id

     if (document.getElementById) {
      if (iframeid && !window.opera) {
        if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {

         iframeid.height = iframeid.contentDocument.body.offsetHeight;

        }else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
         
         iframeid.height = iframeid.Document.body.scrollHeight;
         
        }
      }
     }

iframe嵌入頁(yè)面時(shí)需要等待它完全加載完后才可以調(diào)用SetCwinHeight()，所以當(dāng)修改iframe里的src值時(shí)，也需要等待修改的頁(yè)面完全嵌入后才可以調(diào)用SetCwinHeight()，這樣才有效果，那么該怎么放置SetCwinHeight()，我的解決方法是在iframe標(biāo)簽里直接調(diào)用，即這樣寫(xiě) <iframe onload = "SetCwinHeight();"></iframe>，但是這樣的的話會(huì)污染了html環(huán)境，可是在js中一般只用一次window.onload = function(){}，如果使用多次，后面的會(huì)覆蓋前面的，所以目前為止我能想到的解決方法就這一個(gè)，

當(dāng)嵌入頁(yè)面修改時(shí)，iframe的高度也需要調(diào)整，當(dāng)我在js文件直接這樣window.onload = function(){SetCwinHeight();}調(diào)用SetCwinHeight()時(shí)，只有刷新整個(gè)頁(yè)面才可以自適應(yīng)高度，如果修改了iframe的src，iframe的高度還是前一個(gè)頁(yè)面的高度，當(dāng)前頁(yè)面的高度無(wú)法自適應(yīng)，一開(kāi)始我以為是SetCwinHeight()寫(xiě)錯(cuò)了，但是當(dāng)刷新整個(gè)頁(yè)面時(shí)，當(dāng)前頁(yè)面又可以自適應(yīng)了，在遇到這個(gè)問(wèn)題之后，我的焦急毛病又出現(xiàn)了，總是沒(méi)有分析問(wèn)題就急急忙忙的去查找有關(guān)于問(wèn)題的解決方法，然后查出來(lái)的又文不對(duì)題，這樣反反復(fù)復(fù)，不僅浪費(fèi)了時(shí)間，還使得自己的心情特別煩躁，這樣的話工作就無(wú)法再進(jìn)展下去。通過(guò)了這次的工作明白了自己的毛病，在休息了一會(huì)后，重新靜下心來(lái)整理思路，然后分析出現(xiàn)的問(wèn)題，程序如何運(yùn)行，點(diǎn)擊后程序運(yùn)行的步驟又是什么，分析完后再看看是哪一步出錯(cuò)了，為什么會(huì)出錯(cuò)，像這次出現(xiàn)的錯(cuò)誤，并不是程序?qū)戝e(cuò)了，而是程序運(yùn)行的步驟出錯(cuò)了，整個(gè)頁(yè)面刷新后就可以實(shí)現(xiàn)效果，但是修改src后又沒(méi)有效果了，而window.onload = function(){}這一步是等待頁(yè)面完全加載完后才執(zhí)行，那么應(yīng)該就是加載的問(wèn)題了，所以需要等待頁(yè)面加載完后才可以調(diào)用SetCwinHeight()，通過(guò)這樣的分析，最后終于將問(wèn)題解決了，經(jīng)過(guò)這次，我一定要改掉急躁這個(gè)毛病，應(yīng)該在遇到問(wèn)題后，先分析問(wèn)題和思考解決方法，如果自己解決不了再去查找相應(yīng)的解決方法。這樣就不會(huì)浪費(fèi)時(shí)間和精力了。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: