Iframe自适应其页面高度[转]

摘要:
实现iframe的自适应高度实现iframe的自适应高度可以自动适应页面的长度,避免页面和iframe同时有滚动条的现象。程序代码//**iframe自动适应页面**////输入要根据页面高度自动调整高度的iframe名称列表//用逗号分隔每个iframe的ID。例如:[“myframe1”,“myframe2”],如果只有一个表单,请不要使用逗号//定义iframe ID variframeids=[“test”]//如果用户的浏览器不支持iframe隐藏iframe,yes表示隐藏iframe,no表示不隐藏variframehide=“yes”函数dyniframesize(){vardyniframe=newArray()for{if{//自动调整iframe高度dyniframe[dyniframe.length]=document.getElementById;if(dynifraame&&!
程序代码:
function SetWinHeight(obj)
{
 var win=obj;
 if (document.getElementById)
 {
  if (win && !window.opera)
  {
   if (win.contentDocument && win.contentDocument.body.offsetHeight)

    win.height = win.contentDocument.body.offsetHeight;
   else if(win.Document && win.Document.body.scrollHeight)
    win.height = win.Document.body.scrollHeight;
  }
 }
}
最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
 程序代码
<iframe name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>

另一种情况的iframe解决方案(超简单)
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下

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 name="left" frameBorder=0 scrolling=no src="http://t.zoukankan.com/XXX.asp" width="100%"></IFRAME>

2、给你网站里所有的被包含文件里面每个都加入
<script language = "JavaScript" src = "http://t.zoukankan.com/bottom.js"/></script>
3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!

实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
 程序代码
<script type="text/javascript">
//** iframe自动适应页面 **//

//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

//定义iframe的ID
var iframeids=["test"]

//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes"

function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

Trackback:http://www.cnblogs.com/7in10/archive/2007/10/08/917291.html

免责声明:文章转载自《Iframe自适应其页面高度[转]》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Flask-爱家租房项目ihome-01-项目框架的搭建linux服务器使用Jenkins+gradle+git打apk包,报错Gradle build daemon disappeared unexpectedly (it may have been killed or may have crashed)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

多个iframe的刷新问题

我们的系统有个公用的弹出框,弹出框html结构是在顶层页面里的。一般弹出框里的内容,单独做个页面,嵌入iframe里面。就可以在弹出框里显示要显示的内容。但是出现一个问题是,有时候弹出框里的操作不是单一的,就像这次的操作。在弹出框里有个分拣操作,这个操作力选中目标文件夹的时候又有一个新建文件夹的操作。选择新建文件夹-新建文件夹成功后,还需要返回到分拣操作的...

python实现获取登录验证码图片

  自动化测试登录页面一般都会存在验证码校验问题,大部分童鞋都是直接把验证码校验关闭掉,下面记录的是如何获取验证码图片的方法: 1.首先获取登录页面图片; 2.确定验证码坐标和大小; 3.通过坐标和尺寸在登录页面上截取验证码图片; 4.截取的验证码图片保存为新的文件。 代码实现如下: from selenium import webdriver impor...

使用jQuery和Bootstrap实现多层、自适应模态窗口

本篇实践一个多层模态窗口,而且是自适应的。   点击页面上的一个按钮,弹出第一层自适应模态窗口。   在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口。     具体页面实现部分如下: <head> <meta http-equ...

submit提交表单后,不刷新当前页面

<form method="get" target="test" action="a.html"> <input type=""text /> <input type="submit" /> </form> <iframe name="test" style="display:none">...

手机端自适应字体大小和元素宽度自适应

以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义,media定义好之后,拿起键盘就是干。 字体、宽高都用rem来定义,此方法略爽! @media (min-0px){ html{font-size:12px;} } @media (min- 320px){ html{...

前端常见跨域解决方案

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face...