javascript应用:Iframe自适应其加载的内容高度
JavaScript应用 内容 加载 高度 适应 iframe
2023-06-13 09:13:55 时间
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 自适应其加载的网页(多浏览器兼容)</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 自适应其加载的网页(多浏览器兼容)
</div>
</body>
</html>
相关文章
- javascript 高级教程 视频_精通JavaScript
- 【说站】javascript中promise的特殊场景应用
- JavaScript 对象所有方法介绍,看这一篇就够了!
- 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈
- JavaScript计算指定日期与当前日期的相差天数详解编程语言
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- JavaScript学习总结(六)——JavaScript判断数据类型总结详解编程语言
- 添加到收藏夹的Javascript脚本forie,firefox
- Javascript更新JavaScript数组的uniq方法
- JavaScript验证浏览器是否支持javascript的方法小结
- JavaScript正则表达式之RegExp属性、方法及应用分析
- JavaScript事件冒泡简介及应用
- javascript面向对象编程代码
- javascript针对DOM的应用实例(一)
- javascript针对DOM的应用分析(三)
- JavaScript模式之工厂模式(Factory)应用介绍
- Javascript在IE和FireFox中的不同表现简析
- javascript日期时间转换的方法
- javascript中onclick(this)用法介绍
- 设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- Javascript全局变量var与不var的区别深入解析
- javascript的回调函数应用示例
- 函数式JavaScript(一)简介
- jquery对象和javascript对象即DOM对象相互转换
- JavaScript中实现异步编程模式的4种方法