JavaScript在A页面判断B页面加载完毕(iframe load)
今天遇到一个需求,在A页面上判断B页面是否加载完毕(B页面是第三方页面),加载完毕时隐藏loading动画。。。
而平时我们一般做的事是在B页面上判断B页面是否加载完毕,进行操作。
if(document.readyState == 'Loaded'){
// 我们的操作
//页面加载readyState的五种状态 原文如下:
//0: (Uninitialized) the send( ) method has not yet been invoked.
//0 - (未初始化)还没有调用send()方法
//
//1: (Loading) the send( ) method has been invoked, request in progress.
//1 - (载入)已调用send()方法,正在发送请求
//2: (Loaded) the send( ) method has completed, entire response received.
//2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
//3: (Interactive) the response is being parsed. 4: (Completed) the response has been parsed, is ready for harvesting.
//3 - (交互)正在解析响应内容
//
//4: (Completed) the response has been parsed, is ready for harvesting.
//4 - (完成)响应内容解析完成,可以在客户端调用了
}。
那么在A页面做B页面(新页面)的加载判断,据我所知,这是做不到(也许是我不知道有其他更高明的方法),随采用了iframe的方式去做。在B页面嵌套在A页面里,就可以做了。
PS:一些框架,如NG,SUI等里面貌似可以做(我没有去尝试,为了一个loading引入一个大框架,血亏啊)。
话不多说,主要代码如下,
完整demo下载地址:https://pan.baidu.com/s/1o8yJLm6(包括了loading)
主要代码:
HTML:
<iframe id="frame" frameborder="0" src="">
</iframe>
JS:
iframe_load: function () {
//兼容IE7-8
if ($('#frame')[0].attachEvent) {
$('#frame')[0].attachEvent('onload', function () {
$('#frame').show();
$('#loading').hide();
})
} else {
$('#frame')[0].onload = function () {
$('#loading').hide();
$('#frame').show();
}
}
},
CSS:
#frame{
height: 100%;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
} 本身JQ也有load,但是本人没用成功,一直报错,报错JQ的东西。
试过$.load(),但是遇到跨域问题。
JavaScript在A页面判断B页面加载完毕(iframe load)的更多相关文章
- 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
- axios(封装使用、拦截特定请求、判断所有请求加载完毕)
博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...
- Js判断CSS文件加载完毕的实例教程
要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至se ...
- web页面判断是否首次加载
判断web页面是否是首次加载: if(!window.name){ window.name ='name' this.setState({ note:true })}
- javaScript & jquery完美判断图片是否加载完毕
好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ----------------------------------------- ...
- js判断图片是否加载完毕
附件: https://www.jb51.net/article/102385.htm 问题: .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...
- c#如何判断webbrowser已经加载完毕
最近有个小程序需要采集网页源代码,但有的网页中JS脚本又会生成额外的代码,比如http://www.cnblogs.com/lidabo/p/4169396.html 红框部分便是另外加载的代码. 此 ...
- js判断网页是否加载完毕 包括图片
<script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 docum ...
- jquery判断图片是否加载完毕
来源: <http://www.2cto.com/kf/201409/331234.html> 利用图片没有加载完成的时候,宽高为0.我们很容易判断图片的一个加载情况.如下: 思路:判断图 ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
随机推荐
- NOI 2010 海拔 ——平面图转对偶图
[题目分析] 可以知道,所有的海拔是0或1 最小割转最短路,就可以啦 SPFA被卡,只能换DIJ [代码] #include <cstdio> #include <cstring&g ...
- Xcode 插件失效
1.终端输入: 如果放在了应用程序里,就是这个: defaults read /Applications/Xcode.app/Contents/Info DVTPlugInCompatibilityU ...
- java抽象类
Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...
- http协议笔记
协议:双方/多方共同遵守的一个规范.类比生活中协议 理解: webservice=http协议+xml Rest =http协议+json 开始,客户端和其他服务器都是没有关系的,比如 ...
- 【转】logback logback.xml常用配置详解(二)<appender>
原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...
- 安卓中級教程(7):annotation中的 public @interface的用法
package com.example.ele_me.util; import java.lang.annotation.Retention; import java.lang.annotation. ...
- php获得http头部信息的方法
$url = 'http://www.baidu.com'; $fp = fopen($url, 'r'); $meta_data = stream_get_meta_data($fp); var_d ...
- WINDOWS SERVER 2008 RD服务器搭建
RD服务器详细名称为:RemoteDesktop Server 远程桌面服务器.但微软觉得这名字很怪诞,所以中文名用:终端服务器来代替这个叫法:TerminalServiceServer 在介绍搭建之 ...
- Robot Framework 的安装和配置(转载)
Robot Framework 的安装和配置 在使用 RF(Rebot framework)的时候需要 Python 或 Jython 环境,具体可根据自己的需求来确定.本文以在有 Python 的环 ...
- sql server 游标 写给自己
) --定义两个局部变量 @id @name 全局变量是两个@@name ) Declare Cur Cursor For --定义一个游标 select id,name from temp1 --查 ...