js中iframe载入后高度自适应

关于iframe载入完毕的判断介绍了关于iframe载入完成的判断方法

iframe中跨域载入页面，在父级页面由于跨域的限制是访问不了加载页面的window对象，也就调用不了子页面中声明的函数。
因此在父级页面中判断iframe是否载入完毕最初的方式是使用参照元素载入完成的方式：

 代码如下 复制代码
var loginiframe = document.createElement("iframe");
loginiframe.src = "http://login.hxsd.com/";
loginiframe.onload = function(){
    alert("load");
}
document.body.appendChild(loginiframe);

但是上面这种方式在ie浏览器下在loginiframe加载完成后却没有响应，对ie浏览器做了其他的处理:

 代码如下 复制代码
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
var loginiframe = document.createElement("iframe");
loginiframe.src = "http://login.hxsd.com/";
if (isIE){
    loginiframe.onreadystatechange = function(){
 if (loginiframe.readyState == "complete"){
     alert("load");
 }
    };
} else {
    loginiframe.onload = function(){
 alert("load");
    };
}
document.body.appendChild(loginiframe);

问题解决后，通过阅读《Iframes, onload, and document.domain》，在IE下对于iframe的onload的支持是隐性的，最终解决方式:

 代码如下 复制代码

var loginiframe = document.createElement("iframe");
loginiframe.src = "http://login.hxsd.com/";
if (loginiframe.attachEvent){
    loginiframe.attachEvent("onload", function(){
     alert("load");
    });
} else {
    loginiframe.onload = function(){
 alert("load");
    };
}
document.body.appendChild(loginiframe);

下面是介绍载入完成后使iframe高度自适应
具体的实现代码如下：

 代码如下 复制代码

 function loadFrame(oFrame, sFrameSrc) {
    oFrame.src = sFrameSrc;
    if (oFrame.attachEvent){
        oFrame.attachEvent("onload", function(){
            autoChangeFrameHeight(oFrame);
        });
    } else {
        oFrame.onload = function(){
            autoChangeFrameHeight(this);
        };
    }
}
 
function autoChangeFrameHeight(oFrame) {
    var nHeight = Math.max(oFrame.contentWindow.document.body.scrollHeight, oFrame.contentWindow.document.documentElement.scrollHeight);
    oFrame.height = nHeight;
}

以上方法只适用于同域的链接，在iframe内的内容加载完成后会获取iframe内的高度赋值给iframe的高度
对于跨域的情况，由于浏览器安全性的设置，不同域的页面之间是不能通信的，解决的方法是需要通过在iframe调用的页面中构建一个与父级页面同域的页面，通过url的形式将子页面的高度传递过去，具体代码如下：
子页面中：

 代码如下 复制代码

 window.onload = function() {
    var oFrame = document.createElement("iframe");
    var nHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    document.body.appendChild(oFrame);
    oFrame.src = "http://PARENT_DOMAIN/agentFrame.html?height=" + nHeight;
    oFrame.style.display = "none";
}

代

理页面中：

 代码如下 复制代码
 var nHeight = location.href.match(/?height=(d+)$/)[1];
window.top.document.getElementById("frame").height = nHeight;

其中window.top为调用的最顶层窗口

时间： 2024-09-24 17:13:32

js中iframe载入后高度自适应的相关文章

javascript中IFrame跨域高度自适应实现代码

同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为"iframeid"的iframe的高度,通过JavaScript取得被嵌套页面最终高度,然后在主页面进行设置来实现. 另外,请注意此解决方案仅供同域名下使用.  代码如下 复制代码     <script type="text/javascript">       function SetCwinHeight(){         var iframeid=documen

jQuery实现iframe宽度、高度自适应方法

高度自适应超级简单的方法,也不用写什么判断浏览器高度.宽度啥的. 下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的. 注意别放错地方了哦. iframe代码,注意要写ID  代码如下 复制代码 <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrol

new- 在js中引入movieClip后 button点击事件里的for循环失效!

问题描述 在js中引入movieClip后 button点击事件里的for循环失效! /** * Created by Administrator on 2015/5/27. */ var stage,image,btn1,btn2; var image_x = 200; var image_y = 20; var step_x; var step_y; var arr_x_r = []; var arr_x_l = []; var arr_y = []; var arry = []; wind

js中iframe调用父页面的方法_javascript技巧

本文实例讲述了js中iframe调用父页面的方法.分享给大家供大家参考.具体实现方法如下: 子页面调用父页面的方法在js中很容易实现.我们只需要在主页面加个函数,然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数,就写成: 复制代码 代码如下: window.parent.a(); 但是我在chrome浏览器下却发现此方法无效了 复制代码 代码如下: //在父页面中调用该函数 <script> function dey() { var cards_frame=d

JS解决iframe之间通信和自适应高度的问题_javascript技巧

首先说明下,iframe通信 分为:同域通信 和 跨域通信. 一. 同域通信 所谓同域通信是指 http://localhost/demo/iframe/iframeA.html 下的a.html页面嵌套 iframe 比如: <iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA">的B.html页面,这两个页面数据进行通信

IFrame跨域高度自适应实现代码_javascript技巧

复制代码 代码如下: var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; var iframehide = "yes"; function dynIframeSize(){ var dyniframe = []; for(var i=0;i<iframeids.length;i++){ if(!document.getElementById) return false

Javascript中iframe常用技巧整理(自适应/跨域)

iframe 很多网站都在用,虽然方便开发与维护(可能同时有几个页面调用同一个 iframe ),不过却存在安全问题.嵌入 iframe 的页面,父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作:在完全不同域的情况下,也可以通过更改 hash 的方式进行通信.下面我在九个不同(版本的)浏览器中对此进行数据传输与更改的兼容性测试. 同域或跨子域读写操作 iframe 里的内容 父页面读写操作子页面:  代码如下 复制代码 <iframe id="test-iframe"

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了. 如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. <!DOCTYPE html

JS中Iframe之间传值及子页面与父页面应用_javascript技巧

在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js: 1.在iframe子页面中获取父页面的元素: a>window.parent.document这个是获取父页面document中的对象: b>如果要获取父页面js中的方法:window.parent.xxxx():xxxx()为方法: 2.在父页面中获取iframe子页面中的元素: a> 复制代码 代码如下: var child = document.get