js检测iframe是否加载完成的方法_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

js检测iframe是否加载完成的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

iframe js

本文实例讲述了js检测iframe是否加载完成的方法。分享给大家供大家参考，具体如下：

这里是继上一篇《js实现iframe框架取值的方法(兼容IE,firefox,chrome等)》的扩展应用:

应用场景：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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7378

Java教程

1628

CakePHP 教程

1357

Laravel 教程

1267

PHP教程

1216

显示更多

Related knowledge

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

监测iframe的滚动行为 Feb 18, 2024 pm 08:40 PM

如何监听一个iframe的滚动，需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时，有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件，以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动，并提供具体的代码示例供参考。获取iframe元素首先，我们需要

如何使用JS和百度地图实现地图多边形绘制功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

See all articles

js检测iframe是否加载完成的方法_javascript技巧

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题