zoukankan
html css js c++ java
JavaScript实现Iframe自适应其加载的内容高度
在使用IFrame的时候经常出现内容高度不符影响页面整体效果,利用JavaScript可以实现Iframe自适应其加载的内容高度.
//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
type
="text/javascript"
>
<!--
function
iframeAutoFit()
{
var
ex;
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
h1
=
0
, h2
=
0
;
if
(document.documentElement
&&
document.documentElement.scrollHeight)
{
h1
=
document.documentElement.scrollHeight;
}
if
(document.body) h2
=
document.body.scrollHeight;
var
h
=
Math.max(h1, h2);
if
(document.all)
{h
+=
4
;}
if
(window.opera)
{h
+=
1
;}
a[i].style.height
=
h
+
"
px
"
;
}
}
}
}
catch
(ex)
{}
}
if
(document.attachEvent)
{
window.attachEvent(
"
onload
"
, iframeAutoFit);
window.attachEvent(
"
onresize
"
, iframeAutoFit);
}
else
{
window.addEventListener('load', iframeAutoFit,
false
);
window.addEventListener('resize', iframeAutoFit,
false
);
}
//
-->
</
script
>
</
head
>
<
body
>
<
table
border
="1"
width
="200"
style
="height: 400px; background-color: yellow"
>
<
tr
>
<
td
>
iframe 自适应其加载的网页(多浏览器兼容,支持XHTML)
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
查看全文
相关阅读:
ThinkPHP整合Kindeditor多图处理示例
KindEditor用法介绍
MySQL 1064 错误
Nginx中虚拟主机与指定访问路径的设置方法讲解
AJAX PHP无刷新form表单提交的简单实现(推荐)
教PHP程序员如何找单位(全职+实习),超有用啊!
利用正则表达式实现手机号码中间4位用星号(*)
PHP项目做完后想上线怎么办,告诉你免费上线方法!
备战NOIP——模板复习16
备战NOIP——STL复习1
原文地址:https://www.cnblogs.com/zwei1121/p/900275.html
最新文章
题解 CF96A 【Football】
洛谷OI记录
暑假最后一天
题解 CF32C 【Flea】
题解 P1479 【宿舍里的故事之五子棋】
题解 CF638A 【Home Numbers】
题解 CF59A 【Word】
题解 CF777B 【Game of Credit Cards】
通用奖励面板
ulua
热门文章
剧情体力值恢复
C#冒泡排序(完整代码)
敌方我方血条颜色做出区分
随机数
游戏中遇到的BUG
Unity5.5.2 CD旋转 顺时针逆时针
C#常见编译报错
Invoke()的使用
Kindeditor编辑器加图片上传水印功能(PHP)
KindEditor-4.1.10修改与使用(php)
Copyright © 2011-2022 走看看