当前位置:  编程技术>WEB前端

iframe自适应高度的多种方法方法小结

    来源: 互联网  发布时间:2014-10-04

    本文导语:  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不...

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:
第一种方法:代码简单,兼容性还可以,大家可以先测试下。
代码如下:

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 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:
代码如下:

Javascript代码:

function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}



下面这个兼容性更好一些
代码如下:


function dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}
else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +20;
pTar.width = pTar.contentDocument.body.scrollWidth+20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}





另一种情况的iframe解决方案(超简单)
重要提示:src=/tech-webtech/中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”/index.html(实际上这是因为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,比如:
代码如下:



2、给你网站里所有的被包含文件里面每个都加入
代码如下:



3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
代码如下:


//** 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

    
 
 

您可能感兴趣的文章:

  • iframe transparent透明背景方法
  • 巧妙的最大化动态载入IFrame的方法
  • jquery、js调用iframe父窗口与子窗口元素的方法整理
  • jQuery在iframe中无法弹出对话框的解决方法
  • 在iframe中隐藏横向滚动条的方法大全
  • div层跨越iframe帧显示在上面的解决方法附代码
  • jquery加载完iframe的内容后才进行下一步操作的实现方法
  • jQuery 计算iframe 窗口大小的方法
  • iframe 背景透明 实现方法
  • jquery在firefox中刷新iframe页面,提示重复之前动作的解决方法
  • 用iframe margin实现调用其他网页的某一区域的方法
  • Firefox返回时Iframe的显示Bug的解决方法
  • iframe背景透明的设置方法
  • jquery设置iframe中RadioButton的Text值的方法
  • PHP、Nginx、Apache中禁止网页被iframe引用的方法
  • js调用iframe实现打印页面内容的方法
  • Jquery操作iframe的方法汇总
  • Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法
  • jquery iframe操作的方法分享
  • jquery 操作iframe的几种方法总结
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • [转]目前找到的最好的Iframe自适应高度代码
  • Jquery实现iframe高度自适应的代码
  • 教你用jquery实现iframe自适应高度
  • javascript原生和jquery库实现iframe自适应高度和宽度
  • jsp页面iframe高度自适应的js代码
  • Iframe自适应高度兼容ie,firefox多浏览器
  • Iframe自适应其加载的内容高度
  • 让iframe自适应高度(支持xhtml)IE firefox兼容
  • HTML <iframe> 标签
  • iframe的使用问题?
  • iframe的使用用法
  • jQuery怎么判断iframe中元素是否存在
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery刷新aspx中iframe的src的代码
  • Juery结合iframe实现无刷新上传图片的代码
  • 响应式嵌入 iframe Pym.js
  • Jquery控制iFrame取得父窗口中元素值的代码
  • iframe 的用法与注意事项
  • Jquery方式获取iframe页面中的 Dom元素
  • 请问mozilla(redhat9里的)对javascript的支持程度,是否支持iframe?参与有分
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • 同域jQuery(跨)iframe操作DOM(实例讲解)
  • 同域jQuery(跨)iframe操作DOM(示例代码)
  • 哪位大侠知道<iframe>的用法,小弟在此先谢了
  • 如何用Jquery判断iframe中元素是否存在
  • iframe中使用jquery查找功能
  • 用jquery修复在iframe下的页面锚点失效问题
  • iframe跨域与session失效问题的解决办法
  • jsp 中是否可以实现把同一个文件的一部分内容放在一个 IFRAME 里面? 如何实现?




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3