iframe 加载闪过白块问题
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code
在使用iframe时,iframe背景为白块,刷新时也会闪过白块。如果刷新时间长,就会一直出现白块,让人很烦恼,通过网上搜资料,测试最终解决方法如下所示,注意主要针对IE浏览器测试。
一、iframe 设置不可见 style=" visibility:hidden;"
<iframe id="iframe" style=" visibility:hidden;" src="xx.action" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
二、当iframe加载完成后去掉visibility

function isLoad() {
var iframe = document.getElementById("iframe");
if (iframe.attachEvent) {
iframe.attachEvent("onload", function () {
iframe.style.visibility = "";
});
} else {
iframe.onload = function () {
iframe.style.visibility = "";
};
}
}

这样就能完美的解决了。如果大家还有好的方法,请告知一二,在此感谢!
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code
iframe 加载闪过白块问题的更多相关文章
- iframe 重新加载闪过白块问题
在使用iframe时,iframe背景为白块,刷新时也会闪过白块.如果刷新时间长,就会一直出现白块,让人很烦恼,通过网上搜资料,测试最终解决方法如下所示,注意主要针对IE浏览器测试. 一.iframe ...
- 判断iframe加载完成
一.js判断 var parFrame = document.getElementById("oIframe"); if(parFrame.attachEvent){ parFra ...
- iframe 加载外部资源,显示隐藏loading,onload失效
在项目中使用iframe 来加载外部资源,需要在iframe请求外部资源的时候,需要显示一个loading,在加载完成后,将这个loading隐藏掉,刚开始看到W3C中 iframe有一个 onloa ...
- 判断iframe加载完成、用于当ifame加载完成时执行一些操作
window.frames["iframec"].addEventListener( "load", function(){ window.frames[&qu ...
- [JavaScript] iframe加载完成事件
//iframe加载完成后,对其子元素进行操作 var iframe = document.getElementById("re-img"); if (iframe.attachE ...
- iframe加载方案及性能
普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- iframe中使用模态框提交表单后,iframe加载父页面的解决方法
在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...
- 监听iframe加载完成
用 @load="loading" 在Vue里面写了一个界面,有一个iframe标签, iframe加载其他网站, <iframe @load="loading&q ...
随机推荐
- Laravel 系列入门教程(四)【最适合中国人的 Laravel 教程】
本篇文章中,我将跟大家一起实现 Article 的新增.编辑和删除功能,仔细解读每一段代码,相信本篇文章看完,你就能够 get Laravel 使用之道. RESTful 资源控制器 资源控制器是 L ...
- html/css的学习之路(2)
今天我跟大家说一下html,html里面其实什么东西都可以放进去的.首先创建一个文本,改变他的后缀名为html.这时有个最重要的一点不管是html还是css都不可以用中文和符号命名. 这是html中的 ...
- css 两段对齐和超出部分...
.cont-detail ul li { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: j ...
- vue.js插入dom节点的方式
html代码: <div id="app"></div> js代码: var MyComponent = Vue.extend({ template: '& ...
- 【代码笔记】Web-JavaScript-JavaScript表单验证
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- SOD框架--系统概要
SOD框架(源PDF.NETE框架)系统概要介绍 --核心三大功能(S,O,D): SQL-MAP XML SQL config and Map DAL SQL Map Entity ORM OQL( ...
- Python运维开发:初识Python(一)
一.Pythton简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
- Android调用系统图库返回路径
调用系统图库: Intent intent = new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI); ...
- Android横竖屏切换的生命周期
1.新建一个Activity,并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate--> onStart--> onResume--> 3.按crtl+ ...
- css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题
respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...