iframe高度自适应和宽度自适应

这是一个兼容所有浏览器的iframe自适应代码,他可以对高度与宽度进行自适应,有需要的朋友可以参考一下。
<script language="JavaScript">
/**/
//iframe高度自适应

function IFrameReSize(iframename) { 
    var pTar = document.getElementById(iframename); 
    if (pTar) {  //ff
        if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { 
            pTar.height = pTar.contentDocument.body.offsetHeight; 
        } //ie
        else if (pTar.Document && pTar.Document.body.scrollHeight) { 
            pTar.height = pTar.Document.body.scrollHeight; 
        } 
   } 

}
//iframe宽度自适应

function IFrameReSizeWidth(iframename) { 
    var pTar = document.getElementById(iframename); 
    if (pTar) {  //ff
        if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) { 
            pTar.width = pTar.contentDocument.body.offsetWidth; 
        }  //ie
        else if (pTar.Document && pTar.Document.body.scrollWidth) { 
            pTar.width = pTar.Document.body.scrollWidth; 
        } 
   } 
}
</script>

时间: 2024-08-02 08:47:43

iframe高度自适应和宽度自适应的相关文章

支持跨域iframe高度随内容动态缩放自适应

iframe高度随页面内容自适应高度,当页面高度变动时iframe高度也自动变化 浏览器兼容:IE6++.Firefox全系列.Chrome全系列.(其他版本浏览器未做测试,期待你测试评论反馈以完善本文,谢谢) 同域环境下实现方法: 方法一:仅修改iframe父页面(iframeA.php),iframe子页面内容(iframeB.php)不用添加其他js或额外代码 iframe父页面(iframeA.php)添加代码如下:  代码如下 复制代码 <iframe width="100%&q

iframe高度宽度自适应(转)

http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应   同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档对象,进而可以取得页面的高度,通过此高度值赋值给iframe tag. 2. 子页面可以通过parent访问到父页面里引入的iframe tag,进而设置其高度.   但跨域的情况则不允许对子页面或父页面的文档进行访问(返

JS动态修改iframe高度和宽度的方法_javascript技巧

本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

解决iframe高度自适应各种方法

今天帮一哥们的女朋友的亲戚整个网站,用的dedecms弄的,有段时间没接触dede了,感觉有点生疏,不过还好网站功能一般,所以花了半天时间给整出来了.在最后,由于该cms的留言板模块是独立出来的,我为了省事,就在一个页面用了iframe直接引用留言板的页面进来,可问题就出现了,就是高度不能自适应,给它定死高度吧,不太灵活,于是在网上搜了下iframe自适应高度的解决方法,搜了很多都是N年前的信息,有些早已不起作用了.但功夫不负有心人,最后还是让我找到了这个解决办法,仅在此记录一下吧!  代码如下

跨域iframe高度自适应 改进版(兼容)

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错 误:Permission denied to access property 'document'.这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据.

Iframe高度自适应(兼容IEFirefox、同域跨域)

在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用户操作带来不便.于是自动调整iframe的高度就成为本文的重点. 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 同域时Iframe高度自适

iFrame/Frame嵌入Silverlight时自适应高度的处理

iFrame如果嵌入的是普通网页,这种场景下的iframe高度自适应解决方案,百度一下随手都能找到一大把. 但是嵌入Silvelight时,嵌入iframe的父页面默认不知道Silverlight内容的真实高度,所以上述办法就不起作用了. 其实只要换个思路:既然父页面不知道iframe中SL的高度,SL难道不能自己主动向父页面汇报自已的高度吗? 先看最终的效果: 注:Page1,Page3均是SL中的UserControl 代码见下面的源代码: 主要步骤为 1.SL在每个页面的Page_Load

jQuery简单实现iframe的高度根据页面内容自适应的方法_jquery

本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#iframeId").load(function () { var mainheight = $(this).contents().find("body").height() + 30; $(this).height(mainheight); }); 方式2: //注意:下面的代码

jquery实现iframe高度自适应代码

废话不多说,直接上代码. 一.父窗口代码  代码如下 复制代码 <iframe id="_case" src="case.html" width="300" height="0" frameborder="0" scrolling="no" ></iframe> 二.子窗口代码    代码如下 复制代码 <div id="relation"