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