javascript 中iframe高度自適應(yīng)(同域)實(shí)例詳解
javascript 中iframe高度自適應(yīng)(同域)
今天解決了iframe高度自適應(yīng)的問題,不過這只是同域下的頁(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)用,即這樣寫 <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),一開始我以為是SetCwinHeight()寫錯(cuò)了,但是當(dāng)刷新整個(gè)頁(yè)面時(shí),當(dāng)前頁(yè)面又可以自適應(yīng)了,在遇到這個(gè)問題之后,我的焦急毛病又出現(xiàn)了,總是沒有分析問題就急急忙忙的去查找有關(guān)于問題的解決方法,然后查出來(lái)的又文不對(duì)題,這樣反反復(fù)復(fù),不僅浪費(fèi)了時(shí)間,還使得自己的心情特別煩躁,這樣的話工作就無(wú)法再進(jìn)展下去。通過了這次的工作明白了自己的毛病,在休息了一會(huì)后,重新靜下心來(lái)整理思路,然后分析出現(xià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后又沒有效果了,而window.onload = function(){}這一步是等待頁(yè)面完全加載完后才執(zhí)行,那么應(yīng)該就是加載的問題了,所以需要等待頁(yè)面加載完后才可以調(diào)用SetCwinHeight(),通過這樣的分析,最后終于將問題解決了,經(jīng)過這次,我一定要改掉急躁這個(gè)毛病,應(yīng)該在遇到問題后,先分析問題和思考解決方法,如果自己解決不了再去查找相應(yīng)的解決方法。這樣就不會(huì)浪費(fèi)時(shí)間和精力了。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法
這篇文章主要介紹了JavaScript將數(shù)組轉(zhuǎn)換為鏈表的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹
這篇文章主要介紹了微信小程序購(gòu)物商城系統(tǒng)開發(fā)系列-工具篇的介紹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11
JavaScript對(duì)Cookie進(jìn)行讀寫操作實(shí)例
這篇文章主要介紹了JavaScript對(duì)Cookie進(jìn)行讀寫操作的方法,實(shí)例分析了javascript針對(duì)cookie的讀寫操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07
javascript模擬評(píng)分控件實(shí)現(xiàn)方法
這篇文章主要介紹了javascript模擬評(píng)分控件實(shí)現(xiàn)方法,涉及javascript操作頁(yè)面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05

