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標(biāo)記的高寬是可以獲取到的。于是突然有了思路。
解決辦法如下：
先動態(tài)生成一個img元素，在iframe頁面加載完成時(onload)將其src賦給img標(biāo)記，然后獲取該img的高寬，再動態(tài)修改iframe高寬即可，同時不要忘了設(shè)定iframe頁面body的margin和padding為0，否則會由于padding和margin默認(rèn)不為0的緣故導(dǎo)致出現(xiàn)滾動條。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
今日遇到的自適應(yīng)問題與以往有一些不同，這次的src是一張圖片，而且是一張大小不確定的圖片（從數(shù)據(jù)庫取出來的數(shù)據(jù)生成的），在此使用以往的方式似乎就沒有那么靈驗了。突然想到img標(biāo)記的高寬是可以獲取到的。于是突然有了思路。
解決辦法如下：
先動態(tài)生成一個img元素，在iframe頁面加載完成時(onload)將其src賦給img標(biāo)記，然后獲取該img的高寬，再動態(tài)修改iframe高寬即可，同時不要忘了設(shè)定iframe頁面body的margin和padding為0，否則會由于padding和margin默認(rèn)不為0的緣故導(dǎo)致出現(xiàn)滾動條。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
一文學(xué)會用JS判斷文字是否被省略(ellipsis)
這篇文章主要給大家介紹了用JS如何判斷文字被省略ellipsis,CSS幫我們搞定了省略,但是JS并不知道文本什么時候被省略了,所以我們得通過JS來計算,接下來,我將介紹2種方法來實現(xiàn)JS計算省略,需要的朋友可以參考下2023-08-08
教你JavaScript利用charAt()統(tǒng)計出現(xiàn)次數(shù)最多的字符和次數(shù)
這篇文章主要介紹了JavaScript利用charAt()統(tǒng)計出現(xiàn)次數(shù)最多的字符和次數(shù)的操作方法，本文以判斷一個字符串'aabcdobdackoppz'中出現(xiàn)次數(shù)最多的字符，并統(tǒng)計其次數(shù)為例，通過實例代碼給大家詳細(xì)介紹，需要的朋友參考下吧2021-08-08
有時編寫 Web 應(yīng)用的代碼會感覺充滿魔力，因為我們只是寫了一系列字符，就能在瀏覽器里看到效果了。但是理解魔法背后的技術(shù)，可以幫助你更好地提高編程技巧2015-12-12
js，jquery滾動/跳轉(zhuǎn)頁面到指定位置的實現(xiàn)思路
這篇文章主要介紹了如何通過js或jquery滾動/跳轉(zhuǎn)頁面到指定位置,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了JS實現(xiàn)的A*尋路算法,結(jié)合實例形式詳細(xì)分析了A*尋路算法的概念、原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2018-12-12
最近在學(xué)習(xí)js 寫了個簡單的效果,菜鳥可以學(xué)習(xí)學(xué)習(xí),基本原理：使用隨即數(shù)設(shè)置top 和left的值，2009-07-07
getElementByIdx_x js自定義getElementById函數(shù)
最近看JS代碼，發(fā)現(xiàn)不少人問getElementByIdx_x是什么函數(shù)，其實就是個getElementById自定義函數(shù)2012-01-01
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)服務(wù)五星好評，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
js 執(zhí)行上下文和作用域的相關(guān)總結(jié)
這篇文章主要介紹了js 執(zhí)行上下文和作用域的相關(guān)知識總結(jié)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap富文本組件wysiwyg數(shù)據(jù)保存到mysql的方法，感興趣的小伙伴們可以參考一下2016-05-05