iframe src為圖片時(shí)的高度自適應(yīng)的代碼
更新時(shí)間：2007年10月29日 20:42:16 作者：
對(duì)于iframe高度自適應(yīng)的問題，網(wǎng)上已經(jīng)被討論n次了，一般通過在iframe加載完畢時(shí)訪問iframe內(nèi)頁body的offsetHeight和offsetWidth然后更新iframe的高寬來實(shí)現(xiàn)。
今日遇到的自適應(yīng)問題與以往有一些不同，這次的src是一張圖片，而且是一張大小不確定的圖片（從數(shù)據(jù)庫取出來的數(shù)據(jù)生成的），在此使用以往的方式似乎就沒有那么靈驗(yàn)了。突然想到img標(biāo)記的高寬是可以獲取到的。于是突然有了思路。
解決辦法如下：
先動(dòng)態(tài)生成一個(gè)img元素，在iframe頁面加載完成時(shí)(onload)將其src賦給img標(biāo)記，然后獲取該img的高寬，再動(dòng)態(tài)修改iframe高寬即可，同時(shí)不要忘了設(shè)定iframe頁面body的margin和padding為0，否則會(huì)由于padding和margin默認(rèn)不為0的緣故導(dǎo)致出現(xiàn)滾動(dòng)條。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
今日遇到的自適應(yīng)問題與以往有一些不同，這次的src是一張圖片，而且是一張大小不確定的圖片（從數(shù)據(jù)庫取出來的數(shù)據(jù)生成的），在此使用以往的方式似乎就沒有那么靈驗(yàn)了。突然想到img標(biāo)記的高寬是可以獲取到的。于是突然有了思路。
解決辦法如下：
先動(dòng)態(tài)生成一個(gè)img元素，在iframe頁面加載完成時(shí)(onload)將其src賦給img標(biāo)記，然后獲取該img的高寬，再動(dòng)態(tài)修改iframe高寬即可，同時(shí)不要忘了設(shè)定iframe頁面body的margin和padding為0，否則會(huì)由于padding和margin默認(rèn)不為0的緣故導(dǎo)致出現(xiàn)滾動(dòng)條。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
整理關(guān)于Bootstrap導(dǎo)航的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果,涉及鼠標(biāo)事件及頁面元素結(jié)點(diǎn)的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript中獲取純正的undefined的方法的相關(guān)資料,需要的朋友可以參考下2016-03-03
如何利用原生JS實(shí)現(xiàn)觸摸滑動(dòng)監(jiān)聽事件
這篇文章主要給大家介紹了關(guān)于如何利用原生JS實(shí)現(xiàn)觸摸滑動(dòng)監(jiān)聽事件的相關(guān)資料,文中將實(shí)現(xiàn)的原理以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06
僅IE支持clearAttributes/mergeAttributes方法使用介紹
僅IE中HTMLElement元素具有clearAttributes/mergeAttributes方法，它們都是非標(biāo)準(zhǔn)的2012-05-05
這篇文章主要介紹了如何制作自己的原生JavaScript路由，對(duì)路由感興趣的同學(xué)，可以參考下2021-05-05
微信小程序自定義單選框樣式實(shí)現(xiàn)單選功能
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義單選框樣式實(shí)現(xiàn)單選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
如何實(shí)現(xiàn)瀏覽器上的右鍵菜單...2006-07-07
這篇文章主要介紹了如何使用javascript操作excel生成報(bào)表,需要的朋友可以參考下2014-05-05
我們在很多大型門戶網(wǎng)站都會(huì)有看到有些一熱點(diǎn)新聞都會(huì)一直向上滾動(dòng)，下面我就來給大家推薦一款Javascript中熱點(diǎn)新聞滾動(dòng)特效代碼，有需要了解的朋友可以參考一下2013-08-08