iframe加载时的loading效果，兼容Firefox

最新推荐文章于 2024-07-26 10:57:21 发布
最新推荐文章于 2024-07-26 10:57:21 发布
阅读量9.7k 收藏 2
点赞数
分类专栏： javascript 文章标签： firefox iframe function

iframe加载时的loading效果，兼容Firefox

 

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>

<body>   

<div align="center" style="position: absolute; width: 100px; height: 100px; z-index: 1; left:158px; top:17px" id="load"><img src="http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif" />&nbsp;loading...</div>
<iframe style="visibility:hidden" onreadystatechange=stateChangeIE(this) οnlοad=stateChangeFirefox(this) name="callframe" id="callframe" width="420" height="100" frameborder="0" scrolling="no" marginheight="0"></iframe>
<script>   
    function stateChangeIE(_frame)
    {
     if (_frame.readyState=="interactive")//state: loading ,interactive,   complete
     {
     var loader = document.getElementById("load");
        loader.innerHTML      = "";    
        loader.style.display = "none";  
        _frame.style.visibility = "visible";   
     }   
    }
    function stateChangeFirefox(_frame)
    {
     var loader = document.getElementById("load");
        loader.innerHTML      = "";    
        loader.style.display = "none";  
        _frame.style.visibility = "visible";   
    }
    callframe.location.href="http://www.hao123.com";
</script>   
</body>
</html>

一直学习
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
4-2 如何延迟加载图片
liuhao9999的博客
06-24 526
由于在 HTML 中作为元素或 CSS 背景图像内联，图像可以出现在网页上。在这篇文章中，您将了解如何延迟加载这两种类型的图像。 内嵌图像# 最常见的延迟加载候选是元素中使用的图像。对于内嵌图像，我们有三个延迟加载选项，可以组合使用以实现跨浏览器的最佳兼容性： 使用浏览器级延迟加载 使用交叉点观察器 使用滚动和调整大小事件处理程序 使用浏览器级别的延迟加载# Chrome 和 Firefox 都支持带有loading属性的延迟加载。此属性可以添加到元素，也可以添加到元素。值lazy告诉浏览器如果
jquery插件:ajax和iframe加载提示效果
03-29
这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.
iframe调用加loading特效
01-15
iframe调用加loading特效特别合适远程调用速度慢而等待问题，简单方便
iframe加载loading...
管子（zero）的杂乱空间
12-06 1674
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
vue使用iframe @load指令
最新发布
qq_36657291的博客
07-26 633
在HTML的元素中，@load是一个在Vue.js框架中使用的指令（或称为事件监听器），它用于监听的load事件。load事件在的内容完全加载完毕后触发，包括其中的图片、样式表、脚本等资源的加载完成。
iframe 标签(用于嵌套网页)及loading加载动画效果
热门推荐
m0_58293192的博客
12-16 1万+
iframe 标签(用于嵌套网页)及loading加载动画效果
给iframe添加loading状态
xcodebin的博客
08-06 5610
if(iframe.attachEvent){ //IE iframe.attachEvent("onreadystatechange", function() { //此事件在内容没有被载入时候也会被触发，所以我们要判断状态 //有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断 if (iframe.readyState...
iframe添加loading效果
lfq1996的博客
03-14 2301
iframe添加loading效果
框架加载时的loading效果，兼容Firefox.rar
07-04
"框架加载时的loading效果，兼容Firefox.rar"这个资源就是针对这一需求提供的解决方案。 “loading”效果通常由JavaScript（JS）实现，因为JS具有动态操作DOM（文档对象模型）的能力，可以实时更新页面内容。在这个...
基于JS判断iframe是否加载成功的方法(多种浏览器）
10-22
`onreadystatechange`事件会在`iframe`内容发生变化时触发，包括加载中（`loading`）、加载完成（`loaded`）以及加载成功（`complete`）。我们需要结合`iframe`的`readyState`属性来判断是否已完全加载。以下是一个...
jquery插件:ajax和iframe加载提示效果1.1版
05-05
我的博客地址 http://blog.csdn.net/qq413041153/article/details/7397622 更新日志2012-05-05： 修复了几个bug： 1，iframe在没有指定宽和高时默认全屏的bug 2，当iframe隐藏时的错误显示效果 3，当iframe以tab标签的方式显示时，由于tab标签切换执行也需要一段时间，造成的获取的iframe的高和宽不是最终的高和宽 4，其他细微调整。 草草增加了一个例子。和新版本打包在一起。 遗留问题： 1，不支持多个iframe同时异步加载， 2，不支持自定义加载效果图片 3，ajax不支持指定对象加载效果。
iframe判断加载是否完成添加loading或者取消loading效果
weixin_45776308的博客
01-08 867
2.2 将src置空后会立马又调一次这个加载方法，但是此时iframe的内容为空白，所以判断src是否为空值再进行操作，比如我这个里面是加载完成后将loading效果去除。2.1在来回切换iframe得src时，有的iframe已经加载完成却没进入到加载完成得方法中，解决方法：把src置空后调用此方法，然后把src的赋值写在方法的最后面。1.判断iframe是否加载完成的方法。
iframe loading 效果
aichiliao5513的博客
03-09 707
<!DOCTYPE HTML><html lang="zh-cn"><head><meta charset="utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>iframe ...
【转】Firefox下iframe的onload事件有可能无法触发 作者：zhanglili
小荷才露尖尖角
05-31 703
Firefox下，已经load的document，重新open再write一个iframe，则这个iframe的onload不会执行。 重现步骤 在页面中放置一个iframe，并注册一个onload处理函数。 在该处理函数中，打开iframe的文档流。 向文档流使用document.write写入一个iframe，这个iframe包含一个onload属性。 查看onload的处理...
firefox的iframe问题
vicky_lxw的博客
04-06 5922
被前端骂死的ie终于可以扳回一局！firefox对iframe的解析有问题哦！主要发现的有两点： 1、若先display：none再显示的话，那么iframe不会load你要的页面 2、即便不用默认隐藏（display：none），也不能通过src来设置load页面的地址，需要通过href来设置，具体操作方法是利用js：xxxiframeobj.contentWindow.location.h
FireFox下操作IFrame
weixin_30929011的博客
08-19 330
FireFox下操作IFrame //设置freetextbox的contentvar ed;//兼容IE/FireFoxed = document.all?eval("myTextBox_designEditor"):document.getElementById("myTextBox_designEditor").cont...
如何使用iframe加载loading效果让你的网站更加专业
Shids_的博客
03-08 8582
如何使用iframe加载loading效果让你的网站更加专业
iframe加载时白屏
09-14
iframe加载时出现白屏可能是由以下几个原因造成的： 1. iframe 的内容加载速度较慢：如果 iframe 中的内容需要从远程服务器加载，而服务器响应速度较慢或者网络连接不稳定，就会导致加载时出现白屏。可以通过检查网络连接或者优化远程服务器的响应速度来解决这个问题。 2. iframe 的内容存在错误：如果 iframe 中的内容存在语法错误或者其他问题，浏览器可能无法正确地解析和渲染该内容，导致出现白屏。可以通过查看 iframe 内容的开发者工具日志或者将内容单独在浏览器中打开来排查问题。 3. iframe 的高度或宽度设置不正确：如果 iframe 的高度或宽度设置不正确，可能导致内容无法正常显示或者超出了父容器的范围，从而出现白屏。可以尝试调整 iframe 的尺寸或者使用合适的 CSS 样式来解决这个问题。 4. 浏览器安全策略限制：某些浏览器可能会限制跨域加载 iframe 内容，或者对于非 HTTPS 网站加载 iframe 内容进行限制。可以检查浏览器控制台中是否有相关的安全警告信息，如果有可以尝试使用合适的跨域策略或者将网站迁移至 HTTPS 来解决问题。 如果以上方法都没有解决问题，建议提供更多的相关信息，例如具体的代码片段或者浏览器控制台的错误信息，以便更好地帮助您排查问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值