为页内的tab添加的iframe添加加载动画过渡效果
var iframe = $("iframe[data-id=" + id + " ]");
if (iframe.length > 0) {
var exist = $(iframe[0]).attr("exist");
if (exist!=="1") {
var loadindex = layer.load(2, { shade: false });
iframe[0].onload = function () {
//window.parent.document.getElementsByClassName(".loading").innerHTML = "New text!";
layer.close(loadindex);
//$(".loading").html("ok");
};
}
//if (iframe.context.readyState !== "complete" && iframe.context.readyState !== "loaded") {
//}
};
第一步:获取iframe对象,转化成dom对象iframe[0]。
第二步:写dom对象的onload事件,onload事件是在iframe加载完成后执行的事件。
注意:loadindex是 layui的一个loading动画弹窗。exist是一个自定义的状态信息。当tab已经添加了这个iframe的时候给其加的属性。当有这个iframe时,无需过渡动画,直接跳转该tab上。
为页内的tab添加的iframe添加加载动画过渡效果的更多相关文章
- iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...
- ExtJs非Iframe框架加载页面实现
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...
- Exploit Kit——hacker入侵web,某iframe中将加载RIG EK登录页面,最终下载并执行Monero矿工
RIG Exploit Kit使用PROPagate注入技术传播Monero Miner from:https://www.4hou.com/technology/12310.html 导语:Fire ...
- iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码
iOS精选源码 如丝般顺滑的微信朋友圈(点赞,评论,图文混排表情,... 动态菜单第三版本:动态项,自适应方向 仿appstore首页滚动效果 iOS 透明导航栏方案 TransparentNavig ...
- 判断 iframe 是否加载完成的完美方法
一般来说,我们判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似:var iframe = document.createElement(" ...
- Js控制iFrame切换加载网址
<html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...
- 兼容:判断 iframe 是否加载完成
判断 iframe 是否加载完成其实与 判断 JavaScript 文件是否加载完成 采用的方法很类似 var iframe = document.createElement("iframe ...
- 想要配置文件生效 需要通过添加到web.xml加载到内存中
想要配置文件生效 需要通过添加到web.xml加载到内存中
- 用JS实现判断iframe是否加载完成
本文出至:新太潮流网络博客 var iframe = document.createElement("iframe"); iframe.src = "blog.iinu. ...
随机推荐
- C#基础之构造函数(构造器)
在每个类里面默认都有一个构造方法,正式因为有了这些方法,你未赋值的变量才会有初始值,当然,我们也可以手动自己创建构造函数,可以创建多个构造函数,自己给出默认值或者!!!规定调用此类的程序对象必须要赋值 ...
- 数据库-第八章 数据库编程-8.4 ODBC编程
ODBC编程 一.ODBC概述 二.ODBC工作原理概述 1.用户应用程序 2.ODBC驱动程序管理器 3.数据库驱动程序 4.数据源管理 5.小结 三.ODBC API基础 1.函数概述 2.句柄及 ...
- SpringAOP使用及源码分析(SpringBoot下)
一.SpringAOP应用 先搭建一个SpringBoot项目 <?xml version="1.0" encoding="UTF-8"?> < ...
- [精华帖]Java接口怎么定义?如何使用?【实例讲解】
[精华帖?]滑稽之谈||| 题目: 模拟电脑USB功能设备使用 1.定义USB接口,具备最基本的开启功能和关闭功能 2.定义电脑类,具有开机.关机以及使用usb设备功能 3.鼠标类.具有usb功能,并 ...
- Java实现 蓝桥杯 算法训练 Lift and Throw
试题 算法训练 Lift and Throw 问题描述 给定一条标有整点(1, 2, 3, -)的射线. 定义两个点之间的距离为其下标之差的绝对值. Laharl, Etna, Flonne一开始在这 ...
- Java实现 LeetCode 232 用栈实现队列
232. 用栈实现队列 使用栈实现队列的下列操作: push(x) – 将一个元素放入队列的尾部. pop() – 从队列首部移除元素. peek() – 返回队列首部的元素. empty() – 返 ...
- Java实现 LeetCode 67 二进制求和
67. 二进制求和 给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1 ...
- Java实现 LeetCode 50 Pow(x,n)
50. Pow(x, n) 实现 pow(x, n) ,即计算 x 的 n 次幂函数. 示例 1: 输入: 2.00000, 10 输出: 1024.00000 示例 2: 输入: 2.10000, ...
- 震惊!当Python遇到Excel后,将开启你的认知虫洞
本文主要内容: 1. Excel,你为什么如此强大 2. 软件开发也需要团队作战 3. Excel的集成方案演化 4. macOS特有的集成方案:applescript 5. Python与Exc ...
- 02 . Tomcat集群会话共享
redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...