zoukankan
html css js c++ java
Iframe自适应其加载的内容高度
最简单的一种方法
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下
超简单哦
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>
2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "bottom.js"/></script>
3、OK,收工!
我在WINXP、IE6下面测试通过。很简单吧!
复杂的方法
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
>
查看全文
相关阅读:
函数防抖和函数节流.md
es6的展开运算符.md
web安全-xss.md
es6 数组实例中的find() 和 findIndex() 方法.md
vuex的学习
利用nodejs搭建本地服务器.md
webpack的配置学习
npm常用命令
配置phpstorm支持less自动编译css
Nginx配置中遇到到的问题和解决方案
原文地址:https://www.cnblogs.com/goody9807/p/672257.html
最新文章
CSS实现多行文本溢出省略效果和单行文本溢出省略效果
JS实现下拉刷新和上拉加载
jQuery中noConflict()机制的冲突解决方法
[转载]求N个数的最大公因数(算法)
java中关于Integer 和java 中方法参数传递的几个问题
求素数或者素数因子
form中只有一个input刷新页面问题
uploadify 初始化访问url
Js数组操作基本方法
redis命令及linux上的使用
热门文章
MySQL命令及linux上mysql的使用
python中最好理解的实现单例模式的方法
django中python中对redis进行读写分离封装
关于服务器开启数据库远程连接的问题
解决CentOS7关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory.(转)
yii2 部署服务器
关于华为云服务器搭建小问题汇总(不定时更新)
phpstudy 线上添加域名
js 中比较常见的排序算法.md
js去重的三种方法.md
Copyright © 2011-2022 走看看