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
>
查看全文
相关阅读:
windows 2012 r2怎么进入本地组策略
ESXI | ESXI6.7如何在网页端添加用户并且赋予不同的权限
exsi 6.7u2 不能向winows虚拟机发送ctrl+alt+del
正确安装Windows server 2012 r2的方法
gitkraken生成ssh keys并连接git
GitKraken 快速配置 SSH Key
寒假学习进度六
寒假学习进度五——活动之间的跳转以及数据的传递
寒假学习进度四(解决Android studio的com.android.support.v4.view.ViewPager报错问题)
寒假学习进度三——安卓的一些基本组件
原文地址:https://www.cnblogs.com/zwei1121/p/900275.html
最新文章
Leetcode | 刷题日记(1)
Idea-LifecycleException when deploying
Tomcat异常:UnsupportedClassVersionError unsupported major.minor version 51.0 unable to load class [dup
CSS学习 | 思维导图
CSS学习笔记--Div+Css布局实战(入门)
消息中间件之ActiveMQ(非原创)
消息中间件介绍(非原创)
Linux从入门到精通总结(非原创)
Linux发展史与安装-Linux从入门到精通第一天(非原创)
Yum项目上线实战 (网站运维)-Linux从入门到精通第十一天(非原创)
热门文章
MySQL基础-Linux从入门到精通第十天(非原创)
Shell基础 -Linux从入门到精通第九天(非原创)
Linux的权限管理操作-Linux从入门到精通第八天(非原创)
Linux的权限管理操作-Linux从入门到精通第七天(非原创)
Linux自有服务(2)-Linux从入门到精通第六天(非原创)
Linux自有服务(1)-Linux从入门到精通第五天(非原创)
Sublime text3 最新版破解,永久有效
在Docker中部署Confluence和jira-software
SQL server安装时显示重启计算机失败问题解决办法
SQL Server 2012 下载和安装详细教程
Copyright © 2011-2022 走看看