javascript 与 iframe

最新推荐文章于 2023-09-06 17:07:18 发布

iteye_4865

最新推荐文章于 2023-09-06 17:07:18 发布

阅读量161

点赞数

分类专栏： javascript 文章标签： JavaScript IE EXT 浏览器 Opera ViewUI

javascript 专栏收录该内容

127 篇文章 0 订阅

订阅专栏

iframe是 xhtml strict 模式下禁用的标签，因此不建议使用，故javascript对它的操作也比较模糊。但是旧系统仍然大量使用iframe以及无刷新体验的文件上传，一般设置 transitional ，操作还是要记下来。特别是控制iframe具体包含内容的方法：

1.控制 iframe 跳转

1.1 原始的控制iframe方法

<iframe name='f1' height='100'>
</iframe>
//使用  
window .frames['f1'] .location  ==  window.f1.location == f1.location

这种取到的window.f1相当于iframe包含页面的窗口的window变量，于是不能取得iframe 对象本身的属性，比如height，width 等

1.2 DOM控制iframe方法

<iframe id='f2' height='100'>
</iframe>
//使用 
 document.getElementById('f2').src
//或
 document.getElementById('f2').contentWindow.location

这种document.getElementById('f2') 取到的是页面的 iframe 标签dom对象，可以取得 dom对象的一些属性，比如 height，width

document.getElementById('f2').contentWindow才是iframe所包含页面的窗window

document.getElementById('f2').contentWindow== window .frames['f1']

2.监控iframe装载完毕

2.1 DOM1事件模型方法

若是动态监控，ie，ff各有不同

// ff 要 
document.getElementById('f1').onload =function () {
    alert('只有ff识别');
};   

//ie 要
document.getElementById('f1').onreadystatechange = function () {
    //loading ... interactive....comlete..
   alert('只有ie识别 x.x ' + this.readyState);
};

2.2 DOM2 事件模型方法

则没有区别，只不过ie用attachEvent，ff用addEventListener，监控load事件即可

2.3 具体各种测试看例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>label2</title>
<script src='file:\\\F:\code\lib\ext-2.2.1\adapter\ext\ext-base.js'></script>
<script src='file:\\\F:\code\lib\ext-2.2.1\ext-all.js'></script>
<script>
function t() {
    alert(document.getElementById('f1').contentWindow.location);
    alert(document.getElementById('f1').height);
    alert(window.f2.location);
    alert(window.f2.height);
    //document.getElementById('f1').src='http://www.baidu.com';
    //f1.location='http://www.baidu.com';
    window.f2.location = 'http://www.baidu.com';
}
var addE = function () {
    if (window.addEventListener) {
        return function (el, eventName, fn, capture) {
            el.addEventListener(eventName, fn, (capture));
        };
    } else if (window.attachEvent) {
        return function (el, eventName, fn, capture) {
            el.attachEvent("on" + eventName, fn);
        };
    } else {
        return function () {};
    }
}();
window.onload = function () {
    //	只有ie识别
    /*
	document.getElementById('f1').onreadystatechange = function () {
	    //loading ... interactive....comlete..
	    alert('只有ie识别 x.x ' + this.readyState);
	 };
    */
    //	只有ff识别
    /*
	document.getElementById('f1').onload =function () {
	     alert('只有ff识别');
	};	
    */
    // DOM 添加事件监听的方法 ie5.5 6 7 ff 全部兼容
    addE(document.getElementById('f1'), 'load', function () {
        alert('全部兼容');
    });
};        
</script>
</head>
<body>
<input id='b' type='button' value="测试4" οnclick="t();" />
<br/>
<iframe id='f1' name='f2' height="200" />
<!-- iframe 不用 dom 监控 onload ie 5,6 ,7 识别 判断 readyState==c omplete 即可
        onreadystatechange="alert('只有ie识别' +this.readyState);" //ie5.5 6 7 ff 全部兼容
        ,但是必须写在html 中,onload 不能动态添加 οnlοad="alert('只有ie识别');" -->
<script>
//放下面不行，一定要放上面
/*
	window.οnlοad=function () {
	addE( document.getElementById('f1'),'load',function () {
			alert(1);
		});
	};
*/     
</script>
</body>
</html>

3.iframe载入后的自适应高度

主要还是利用页面载入后以及iframe onload后的一些操作，关于界面载入见

页面加载判断与onload 研究

function DOMOk(readyOk) {
    /* for Mozilla */
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", readyOk, false);
    }
    /* for Internet Explorer */
    if (window.attachEvent) {
        document.write("<s" + 'cript id="ie-deferred-loader" defer="defer" src="/' + '/:"></s' + "cript>");
        var defer = document.getElementById("ie-deferred-loader");
        defer.onreadystatechange = function () {
            if (this.readyState == "complete") {
                readyOk();
            }
        };
    }
}
var addE = function () {
    if (window.addEventListener) {
        return function (el, eventName, fn, capture) {
            el.addEventListener(eventName, fn, (capture));
        };
    } else if (window.attachEvent) {
        return function (el, eventName, fn, capture) {
            el.attachEvent("on" + eventName, fn);
        };
    } else {
        return function () {};
    }
}();
DOMOk(function () {
    addE(document.getElementById('frame_mz'), 'load', function () {
        //高度自适应呢
        document.getElementById('frame_mz').height = Math.max(
        document.getElementById('frame_mz').contentWindow.document.body.scrollHeight, 
document.getElementById('frame_mz').contentWindow.document.documentElement.scrollHeight);
    });
    frame_mz.location = 'xx.html';
});

所以一般来说，我建议使用DOM2控制iframe的方法，作用更宽泛

ps : 关于 ff iframe 长高后不会再缩回去的解答

http://ued.koubei.com/?p=243

所谓iframe自适应高度，就是，基于界面美观和交互的考虑，隐藏了iframe的border和scrollbar，让人看不出它是个 iframe。如果iframe始终调用同一个固定高度的页面，我们直接写死iframe高度就可以了。而如果iframe要切换页面，或者被包含页面要做DOM动态操作，这时候，就需要程序去同步iframe高度和被包含页的实际高度了。

顺便说下，iframe在迫不得已的时候才去用，它会给前端开发带来太多的麻烦。

传统做法大致有两个：
方法一，在每个被包含页在本身内容加载完毕之后，执行JS取得本页面的高度，然后去同步父页面的iframe高度。
方法二，在主页面iframe的onload事件中执行JS，去取得被包含页的高度内容，然后去同步高度。
在代码维护角度考虑，方法二是优于方法一的，因为方法一，每个被包含页都要去引入一段相同的代码来做这个事情，创建了好多副本。

两个方法都只处理了静的东西，就是只在内容加载的时候执行，如果JS去操作DOM引起的高度变化，都不太方便。

如果在主窗口做一个Interval，不停的来获取被包含页的高度，然后做同步，是不是即方便，又解决了JS操作DOM的问题了呢？答案是肯定的。

Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

主页面代码示例：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>
<script type="text/javascript">
function reinitIframe() {
    var iframe = document.getElementById("frame_content");
    try {
        iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
    } catch(ex) {}
}
window.setInterval("reinitIframe()", 200);
</script>

一直执行，效率会不会有问题？
我做了测试，同时开5个窗口（IE6、IE7、FF、Opera、Safari）执行这个代码，不会对CPU有什么影响，甚至调整到2ms，也没影响（基本维持在0%占用率）。

下面谈谈各浏览器的兼容性问题，如何获取到正确的高度，主要是对body.scrollHeight和 documentElement.scrollHeight两个值得比较。注意本文用的是这个doctype，不同的doctype应该不会影响结果，但是假如你的页面没有申明doctype，那还是先去加一个吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

在主页面追加以下测试代码，以输出这两个值，代码示例：

<div><button οnclick="checkHeight()">Check Height</button></div>
<script type="text/javascript">
function checkHeight() {
    var iframe = document.getElementById("frame_content");
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
}
</script>

被加载页面，可以切换一个绝对定位的层，来使页面高度动态改变。如果层展开，则会撑高页面高度。代码示例：

<div><button οnclick="toggleOverlay()">Toggle Overlay</button>
</div>
<div style="height:160px;position:relative">
<div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div>
</div>
<script type="text/javascript">
function toggleOverlay() {
    var overlay = document.getElementById('overlay');
    overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
}
</script>

下面列出以上代码在各浏览器的测试值：
（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 正确值）

暂且无视Opera比别人少3像素的问题…可以看出，如果没有绝对定位的东西，两个值是相等的，取哪个都无所谓。
但是如果有，那么各个浏览器的表现不太相同，单取哪个值都不对。但可以找到了一条规律，那就是取两个值得最大值可以兼容各浏览器。所以我们的主页面代码就要改造成这样了：

function reinitIframe() {
    var iframe = document.getElementById("frame_content");
    try {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
    } catch(ex) {}
}
window.setInterval("reinitIframe()", 200);

这样子，基本解决了兼容性问题。顺便说下，不光绝对定位的层会影响到值，float也会导致两个值的差异。

如果你演示Demo后，会发现，除了IE，其他浏览器中，当层展开后再隐藏，取到的高度值还是维持在展开的高度303，而非隐藏回去的真正值 184，就是说长高了之后缩不回去了。这个现象在不同被包含页面之间做切换也会发生，当从高的页面切换到矮页面的时候，取到的高度还是那个高的值。
可以归纳为，当iframe窗体高度高于文档实际高度的时候，高度取的是窗体高度，而当窗体高度低于实际文档高度时，取的是文档实际高度。因此，要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以，在iframe的添加 οnlοad=”this.height=100″，让页面加载的时候先缩到足够矮，然后再同步到一样的高度。
这个值，在实际应用中决定，足够矮但又不能太矮，否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到，只能DOM操作完了之后把高度变小了。
在我的一个实际项目中，在成本和收益之间权衡，我并没有做这个事情，因为每个DOM函数中都要插入这个代码，代价太高，其实层缩回去不缩掉也不是那么致命。包括Demo里，也没有去做这个事情。如果读者有更好的方法，请告诉我。

这是最终的主页面的代码：

<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" οnlοad="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe() {
    var iframe = document.getElementById("frame_content");
    try {
        var bHeight = iframe.contentWindow.document.body.scrollHeight;
        var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
        var height = Math.max(bHeight, dHeight);
        iframe.height = height;
    } catch(ex) {}
}
window.setInterval("reinitIframe()", 200);
</script>

附Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html

如果只考虑FX和IE，并且，iframe里面内容也不进行DOM操作，那仍然可以用最简单的传统处理方式：

<iframe id="frame_content" src="iframe_b.html" 
scrolling="no" frameborder="0"
 οnlοad="this.height=this.contentWindow.document.documentElement.scrollHeight"
>
</iframe>

iteye_4865

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 与 iframe

iframe是xhtml strict模式下禁用的标签，因此不建议使用，故javascript对它的操作也比较模糊。但是旧系统仍然大量使用iframe以及无刷新体验的文件上传，一般设置transitional，操作还是要记下来。特别是控制iframe具体包含内容的方法： 1.控制 iframe 跳转 1.1 原始的控制iframe方法...
复制链接

扫一扫

专栏目录