这篇文章主要介绍了 js 检测 iframe 是否加载完成的方法, 涉及 JavaScript 针对框架页面控件值的判断与页面加载的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 检测 iframe 是否加载完成的方法。分享给大家供大家参考,具体如下:
这里是继上一篇《{aa0aa}》的扩展应用:
应用场景:iframe 个人感觉最独特的应用之一就是配合 P3P 协议可以实现跨域写入 cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个 iframe 页面是否执行完毕,有没有办法判断 iframe 里的页面是否 load 完成了呢?
iframe1.html:
- <html>
- <head>
- <title>
- 框架内页
- </title>
- </head>
- <body>
- <div>
- <input id="txt" name="txt" type="text" value="3秒钟后这里会变成ok" />
- </div>
- <script type="text/javascript">
- setTimeout("SetValue()", 3000);
- function SetValue() {
- document.getElementById("txt").value = "ok";
- }
- </script>
- </body>
- </html>
iframe2.html:
- <html>
- <head>
- <title>
- 框架内页
- </title>
- </head>
- <body>
- <div>
- <input id="txt" name="txt" type="text" value="6秒钟后这里会变成ok" />
- </div>
- <script type="text/javascript">
- setTimeout("SetValue()", 6000);
- function SetValue() {
- document.getElementById("txt").value = "ok";
- }
- </script>
- </body>
- </html>
index.html:
- <html>
- <head>
- <title>
- 检测本页中的所有iframe是否加载完成
- </title>
- <script type="text/javascript">
- //得取iframe中的某个html控件值
- function getIframeControlValue(iframeId, controlId) {
- var ofrm = document.getElementById(iframeId).document;
- if (ofrm == undefined) {
- ofrm = document.getElementById(iframeId).contentWindow.document;
- var ff = ofrm1.getElementById(controlId).value;
- return ff;
- } else {
- var ie = document.frames[iframeId].document.getElementById(controlId).value;
- return ie;
- }
- }
- //检测所有的iframe是否"加载"完成
- function fnLoadOk() {
- var b = true;
- for (var i = 1; i <= 2; i++) {
- if (getIframeControlValue("frame" + i, "txt") == "ok") {
- b = b && true;
- } else {
- b = b && false;
- }
- }
- return b;
- }
- //设置回答显示区的值
- function setValue(str) {
- if (str != null && str.length > 0) {
- document.getElementById("result").innerHTML = "<span style='color:red'>" + new Date().toLocaleString() + " " + str + "</span>";
- } else {
- document.getElementById("result").innerHTML = "<span style='color:green'>" + new Date().toLocaleString() + " 正在加载" + "</span>";
- }
- }
- var _check = setInterval("t()", 500); //每隔0.5秒检查一次
- function t() {
- if (fnLoadOk()) {
- clearInterval(_check); //加载完成后,清除定时器
- setValue("加载完成!");
- } else {
- setValue();
- }
- }
- </script>
- </head>
- <body>
- <h3>
- 检测本页中的iframe是否加载完成
- </h3>
- <iframe name="frame1" id="frame1" src="iframe1.html" frameborder="1" height="60"
- width="180">
- </iframe>
- <iframe name="frame2" id="frame2" src="iframe2.html" frameborder="1" height="60"
- width="180">
- </iframe>
- <div id="result" style="margin:10px;">
- 准备就绪
- </div>
- </body>
- </html>
值得注意的是:本文中的示例是放在按钮 click 事件中检测的,如果打算页面一打开就开始检测,一定要放在 index.html 页 body 的 onload 事件中,否则会出异常 (原因是 index.html 尚未加载完成,这时就急着获取框架的内容,得到的是 undefined 或 null)
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0221/268467.html