javascript 中iframe高度自適應(同域)
太倉網(wǎng)站建設公司成都創(chuàng)新互聯(lián)公司,太倉網(wǎng)站設計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為太倉上1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設要多少錢,請找那個售后服務好的太倉做網(wǎng)站的公司定做!
今天解決了iframe高度自適應的問題,不過這只是同域下的頁面嵌入,以下是代碼:
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嵌入頁面時需要等待它完全加載完后才可以調(diào)用SetCwinHeight(),所以當修改iframe里的src值時,也需要等待修改的頁面完全嵌入后才可以調(diào)用SetCwinHeight(),這樣才有效果,那么該怎么放置SetCwinHeight(),我的解決方法是在iframe標簽里直接調(diào)用,即這樣寫 ,但是這樣的的話會污染了html環(huán)境,可是在js中一般只用一次window.onload = function(){},如果使用多次,后面的會覆蓋前面的,所以目前為止我能想到的解決方法就這一個,
當嵌入頁面修改時,iframe的高度也需要調(diào)整,當我在js文件直接這樣window.onload = function(){SetCwinHeight();}調(diào)用SetCwinHeight()時,只有刷新整個頁面才可以自適應高度,如果修改了iframe的src,iframe的高度還是前一個頁面的高度,當前頁面的高度無法自適應,一開始我以為是SetCwinHeight()寫錯了,但是當刷新整個頁面時,當前頁面又可以自適應了,在遇到這個問題之后,我的焦急毛病又出現(xiàn)了,總是沒有分析問題就急急忙忙的去查找有關(guān)于問題的解決方法,然后查出來的又文不對題,這樣反反復復,不僅浪費了時間,還使得自己的心情特別煩躁,這樣的話工作就無法再進展下去。通過了這次的工作明白了自己的毛病,在休息了一會后,重新靜下心來整理思路,然后分析出現(xiàn)的問題,程序如何運行,點擊后程序運行的步驟又是什么,分析完后再看看是哪一步出錯了,為什么會出錯,像這次出現(xiàn)的錯誤,并不是程序?qū)戝e了,而是程序運行的步驟出錯了,整個頁面刷新后就可以實現(xiàn)效果,但是修改src后又沒有效果了,而window.onload = function(){}這一步是等待頁面完全加載完后才執(zhí)行,那么應該就是加載的問題了,所以需要等待頁面加載完后才可以調(diào)用SetCwinHeight(),通過這樣的分析,最后終于將問題解決了,經(jīng)過這次,我一定要改掉急躁這個毛病,應該在遇到問題后,先分析問題和思考解決方法,如果自己解決不了再去查找相應的解決方法。這樣就不會浪費時間和精力了。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!