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