javascript應用：Iframe自適應其加載的內容高度
更新時間：2007年04月10日 00:00:00 作者：
main.htm:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>iframe自適應加載的頁面高度</title>
</head>
<body>
<iframe src="child.htm"></iframe>
</body>
</html>
child.htm:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>iframe 自適應其加載的網(wǎng)頁(多瀏覽器兼容)</title>
<script language=javascript>
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h = document.body.scrollHeight;
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = h;
}
}
}
}
catch (ex)
{
alert("腳本無法跨域操作！");
}
}
if(document.attachEvent) window.attachEvent("onload", iframeAutoFit);
else window.addEventListener('load', iframeAutoFit, false);
</script>
</head>
<body>
<div style="width: 200; height: 400; background-color: yellow">
iframe 自適應其加載的網(wǎng)頁(多瀏覽器兼容)
</div>
</body>
</html>
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>iframe自適應加載的頁面高度</title>
</head>
<body>
<iframe src="child.htm"></iframe>
</body>
</html>
child.htm:
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>iframe 自適應其加載的網(wǎng)頁(多瀏覽器兼容)</title>
<script language=javascript>
function iframeAutoFit()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName("IFRAME");
for(var i=0; i<a.length; i++) //author:meizz
{
if(a[i].contentWindow==window)
{
var h = document.body.scrollHeight;
if(document.all) {h += 4;}
if(window.opera) {h += 1;}
a[i].style.height = h;
}
}
}
}
catch (ex)
{
alert("腳本無法跨域操作！");
}
}
if(document.attachEvent) window.attachEvent("onload", iframeAutoFit);
else window.addEventListener('load', iframeAutoFit, false);
</script>
</head>
<body>
<div style="width: 200; height: 400; background-color: yellow">
iframe 自適應其加載的網(wǎng)頁(多瀏覽器兼容)
</div>
</body>
</html>
您可能感興趣的文章:
- js檢測iframe是否加載完成的方法
- js下判斷 iframe 是否加載完成的完美方法
- JS加載iFrame出現(xiàn)空白問題的解決辦法
- 基于JS判斷iframe是否加載成功的方法(多種瀏覽器）
- JS iFrame加載慢怎么解決
- js通過iframe加載外部網(wǎng)頁的實現(xiàn)代碼
- javascript實現(xiàn)iframe框架延時加載的方法
- 動態(tài)加載js、css等文件跨iframe實現(xiàn)
- javascript firefox 自動加載iframe 自動調整高寬示例
- js中頁面的重新加載(當前頁面/上級頁面)及frame或iframe元素引用介紹
- JS判斷iframe是否加載完成的方法
相關文章
這篇文章主要介紹了js前端傳json后臺接收‘‘被轉為"的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
javascript下拉列表中顯示樹形菜單的實現(xiàn)方法
這篇文章主要介紹了javascript下拉列表中顯示樹形菜單的實現(xiàn)方法，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了MUI 上拉刷新/下拉加載功能實例代碼，包括一些個人心得，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-04-04
這篇文章主要為大家詳細介紹了原生javascript實現(xiàn)圖片輪播切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
WXS是小程序的一套腳本語言,結合 WXML,wxs類似js和js又不一樣,好多js語法能在js使用不能在wxs使用可以構建出頁面的結構,這篇文章主要給大家介紹了關于微信小程序實戰(zhàn)教程之WXS語法詳解的相關資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了javascript定時器完整實現(xiàn)方法,以實例形式分析了定時器的嵌套調用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
再讀《JavaScript權威指南》（犀牛書）9.7確定對象類型 之摘錄2012-03-03
在純靜態(tài)網(wǎng)站里，有時候會動態(tài)更新某個區(qū)域往會選擇?Pjax（swup、barba.js）去處理。本文主要和大家分享下Pjax下載動態(tài)加載插件方案，感興趣的可以了解一下2022-09-09
這篇文章主要為大家詳細介紹了bootstrap table單元格新增行并編輯的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄猻so跨域寫cookie的一段js腳本(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05