iframe自適應(yīng)寬度、高度 ie6 7 8,firefox 3.86下測試通過
更新時(shí)間:2010年07月29日 12:57:04 作者:
近期需要一個(gè)iframe自適應(yīng)高度的東西,在網(wǎng)上找了很多,都不能用……一看大體的日期都是大概 2008年前后的其他近期的基本都是以前的轉(zhuǎn)載,所以只好自己動(dòng)手了。
廢話不多說,貼上代碼,也算是自己的一個(gè)代碼存儲(chǔ)。
var temp_iframe
var content = document.getElementById('right'); //id為 right的DOM容器中,進(jìn)行創(chuàng)建iframe和寬高自適應(yīng)
var c = 0;
function append(filename)
{
var the_iframe = "helpfile" + c;
temp_iframe = document.createElement("iframe");
temp_iframe.src = filename;
temp_iframe.scrolling = "no";
temp_iframe.setAttribute("frameborder", "0");
temp_iframe.id = the_iframe;
temp_iframe.name = the_iframe;
scroll(0, 0);
content.innerHTML = "";
content.appendChild(temp_iframe);
if (document.all)
{
temp_iframe.attachEvent('onload', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth); //自適應(yīng)寬
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight); //自適應(yīng)高
});
}
else
{
temp_iframe.addEventListener('load', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth);
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight);
}, false);
}
c++;
return false;
}
/*調(diào)用方法
把此腳本另存為腳本文件:iframe.js,然后再前臺(tái)頁面中調(diào)用:
------------------------------------------------------------------------
<a href="index.html" onclick="return append('xxxx.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
------------------------------------------------------------------------
或者 去掉腳本中最后的 return false,前臺(tái):
------------------------------------------------------------------------
<a href="javascript:append('favorite/Favorites.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
------------------------------------------------------------------------
*/
嘿嘿,其中,最后設(shè)置自適應(yīng)寬高的,其實(shí)可以提出來成為一個(gè)函數(shù)來調(diào)用。
這個(gè)我沒去那么做,有看到文章的朋友,可自行封裝。
其中,還有一些不太方便的,比如我每次建立的iframe必須不同的名字和id,即時(shí)刪除原來已經(jīng)創(chuàng)建的也不行……
還是希望大家多多指教吧。
復(fù)制代碼 代碼如下:
var temp_iframe
var content = document.getElementById('right'); //id為 right的DOM容器中,進(jìn)行創(chuàng)建iframe和寬高自適應(yīng)
var c = 0;
function append(filename)
{
var the_iframe = "helpfile" + c;
temp_iframe = document.createElement("iframe");
temp_iframe.src = filename;
temp_iframe.scrolling = "no";
temp_iframe.setAttribute("frameborder", "0");
temp_iframe.id = the_iframe;
temp_iframe.name = the_iframe;
scroll(0, 0);
content.innerHTML = "";
content.appendChild(temp_iframe);
if (document.all)
{
temp_iframe.attachEvent('onload', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth); //自適應(yīng)寬
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight); //自適應(yīng)高
});
}
else
{
temp_iframe.addEventListener('load', function()
{
temp_iframe.setAttribute("width", window.frames[the_iframe].document.body.scrollWidth);
temp_iframe.setAttribute("height", window.frames[the_iframe].document.body.scrollHeight);
}, false);
}
c++;
return false;
}
/*調(diào)用方法
把此腳本另存為腳本文件:iframe.js,然后再前臺(tái)頁面中調(diào)用:
------------------------------------------------------------------------
<a href="index.html" onclick="return append('xxxx.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
------------------------------------------------------------------------
或者 去掉腳本中最后的 return false,前臺(tái):
------------------------------------------------------------------------
<a href="javascript:append('favorite/Favorites.html')" class="li1">
<div id="right"></div>
<script type="text/javascript" src="iframe.js"></script>
------------------------------------------------------------------------
*/
嘿嘿,其中,最后設(shè)置自適應(yīng)寬高的,其實(shí)可以提出來成為一個(gè)函數(shù)來調(diào)用。
這個(gè)我沒去那么做,有看到文章的朋友,可自行封裝。
其中,還有一些不太方便的,比如我每次建立的iframe必須不同的名字和id,即時(shí)刪除原來已經(jīng)創(chuàng)建的也不行……
還是希望大家多多指教吧。
相關(guān)文章
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹策略模式,以年終獎(jiǎng)為實(shí)例對策略模式進(jìn)行分析,對策略模式進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-11-11JavaScript生成器函數(shù)Generator解決異步操作問題
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator解決異步操作問題示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10Extjs4中tree的拖拽功能(可以兩棵樹之間拖拽) 簡單實(shí)例
這篇文章主要介紹了Extjs4中tree的拖拽功能簡單實(shí)例,有需要的朋友可以參考一下2013-12-12javascript實(shí)現(xiàn)fetch請求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實(shí)現(xiàn)fetch請求返回的統(tǒng)一攔截,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12