`

[原创+转载]iframe 的加载状态和事件的绑定

阅读更多

使用jquery,需要iframe的dom加载完成开始执行的脚本, 可以绑定在
jQuery(iframe_dom.contentDocument).ready(function(){
            alert("ready");
}); // 跨浏览器参见 访问iframe
需要等iframe 内容完全加载完成, 可以绑定:
iframe_jq.load(function(){ // 绑定加载完成之后的动作
            alert("complete");
});
或是
iframe_dom.onload();


根据 iframe 状态的改变进行事件处理:
转载自:http://www.cnblogs.com/micheng11/archive/2009/03/31/1425883.html

<div id="load" align="center">

<img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif"
/> loading

</div>
<!-- 首先放一个div,用做loading效果 -->

<iframe id="demo" src="http://www.****.com" width="100%" height="800" frameborder="0" scrolling="no"marginheight="0"></iframe>
<!-- src 里面放你想要的网页-->

<script type="text/javascript"> 

//<![CDATA[ 

var a = document.getElementById("demo"); 

var b = document.getElementById("load"); 

a.style.display 
="none"//隐藏 

b.style.display 
="block"//显示

a.onreadystatechange 
=
function() 

if (this.readyState=="complete"//最近才知道的。不然也写不出来。

// 解释:一个iframe加载完毕的状态是complete,

// 就象xmlhttp里的那个==4一样,这些都是规定的

b.innerHTML 
="load complete!"

b.style.display 
="none"

a.style.display 
="block"
}
 
}
 
//]]> 
</script>

 

 

-----------EOF---------

分享到:
评论

相关推荐

    通过JavaScript+IFRAME实现页面分屏加载

    - **检测加载状态**:通过监听IFRAME的 `load` 事件,判断内容是否已加载完成。 - **动态创建IFRAME**:使用 `document.createElement('iframe')` 创建IFRAME,并设置其属性。 - **插入IFRAME**:将IFRAME插入到DOM...

    easyui iframe 页面重复加载的问题

    首先在页面加载完成事件中,遍历所有的iframe,将src设置为空字符串,然后绑定一个事件监听器到easyui的tab组件上,监听tab的select事件。在该事件中,获取被选中的标签对应的iframe,并为其动态设置正确的src值。 ...

    asp.net 中使用iframe动态加载页面

    ASP.NET 中使用 iframe 动态加载页面 ASP.NET 中使用 iframe 动态加载页面是指在 ASP.NET 应用程序中使用 iframe ...因此,在使用 iframe动态加载页面时,需要注意安全性和性能问题,合理设计和实现 iframe 的使用。

    js下判断 iframe 是否加载完成的完美方法.docx

    我们可以使用该事件来判断 iframe 是否加载完成。下面是一个示例代码: ```javascript var iframe = document.createElement("iframe"); iframe.src = "https://jb51.net"; iframe.onload = function(){ alert(...

    iframe图片上传+用户本地加载图片+jquery表达验证+视频解析demo

    标题中的“iframe图片上传+用户本地加载图片+jquery表达验证+视频解析demo”涉及了四个主要的Web开发技术点,接下来我们将逐一详细讲解。 1. **Iframe图片上传**: 在Web应用中,iframe常用于创建一个独立的浏览...

    判断iframe里的页面是否加载完成

    在JavaScript中,我们可以利用`iframe`元素的`onload`事件来监听其加载状态。当`iframe`内的所有资源(包括HTML、CSS、JavaScript、图片等)加载完毕时,`onload`事件会被触发。以下是一个简单的示例: ```...

    iframe加载时白块及刷新白色背景问题解决

    在使用iframe时,iframe背景为白块,刷新时也会闪过白块。如果刷新时间长,就会一直出现白块,让人很烦恼,通过网上搜资料,测试很多依然没有效果,最终解决方法如下所示,注意主要针对IE浏览器测试。

    ztree+iframe (点击树动态加载右边页面)

    将ZTree与iframe结合,可以在用户点击树节点时,通过改变iframe的src属性,加载对应的内容页面,这样用户无需离开当前页面就能查看或操作相关信息,提高了页面的响应速度和用户的操作效率。 实现"ztree+iframe"的...

    JQuery判断子iframe何时加载完成解决方案

    更改src属性后,我们绑定一个函数到.load()事件上,这个函数会在iframe内容加载完成后执行。在该函数内部,我们将标志变量isOnLoad设置为false,并执行加载成功的提示或者其他操作。 让我们来看一下具体的代码示例...

    bootstarp+iframe 实现局部刷新 后台模板

    总的来说,这个后台模板通过结合Bootstrap的强大样式支持和`iframe`的局部刷新能力,提供了一个高效、灵活的后台管理界面,加上选项卡和窗口管理功能,提升了后台操作的便捷性和效率。对于开发者来说,这样的模板...

    2.(vue3.x+vite)调用iframe的方法(vue编码).rar

    前端技术社区总目录有各种各样的前端示例其地址为: https://blog.csdn.net/m0_60387551/article/details/128017725

    JS iFrame加载慢怎么解决

    在探讨JavaScript中iFrame加载缓慢的问题时,我们会遇到一些常见的性能瓶颈和解决方案。首先,理解iFrame加载的工作机制对于找到合适的解决方案至关重要。iFrame是HTML中的一个元素,它能够将另一个HTML文档嵌入到...

    jquery插件:ajax和iframe加载提示效果1.1版

    1,iframe在没有指定宽和高时默认全屏的bug 2,当iframe隐藏时的错误显示效果 3,当iframe以tab标签的方式显示时,由于tab标签切换执行也需要一段时间,造成的获取的iframe的高和宽不是最终的高和宽 4,其他细微调整...

    div+css代替iframe框架并带全屏遮罩加载特效

    在网页设计和开发中,传统的`iframe`框架常被用于嵌入外部页面或者实现多页面同屏显示。然而,随着Web技术的发展,`div+css`布局方式因其灵活性和高效性逐渐成为主流,许多开发者开始寻找用`div+css`替代`iframe`的...

    jquery树形菜单+iframe显示实例

    本示例“jquery树形菜单+iframe显示实例”是将jQuery技术与树形菜单和iframe结合,实现了一个交互式的网页布局。在这样的应用中,用户可以通过点击树形菜单来触发iframe中的内容更新,例如打开一个PDF文件。 首先,...

    iframe跨域常用问题和iframe页面自适应

    父页面和`iframe`页面可以通过`window.postMessage()`发送消息,然后在另一方的`message`事件中接收。这种方法无需服务器端配合,但需要注意安全问题,防止恶意脚本注入。 二、`iframe`页面自适应 为了让`iframe`...

    js弹出div层模拟alert+(iframe中使用)

    在JavaScript编程中,有时我们可能需要自定义弹出层来替代浏览器原生的`alert`、`prompt`或`confirm`对话框,以提供更丰富的交互体验或者在特定场景下,比如在`iframe`中使用时,保持页面的可操作性。本主题将详细...

    动态加载js、css等文件跨iframe实现

    1、动态加载js,css文件(用原生js和jquery) iframe结构: frame0(父) frame2(子) frame3(子) frame2中触发事件,动态的向frame3中 加载js、css文件和 dom元素? *同级之间可以调用,可以 通过 子-父-子 的方式...

    基于JS判断iframe是否加载成功的方法(多种浏览器).docx

    在其他非 IE 浏览器中,如 Firefox、Opera、Chrome 等,iframe 都会拥有一个 onload 事件,此事件只要触发就说名内容已经加载完毕。 因此,我们可以使用以下代码来判断 iframe 是否加载成功: if (iframe....

    在iframe 中页面中设置遮罩遮罩层

    4. 将JavaScript函数绑定到合适的事件上,以触发遮罩层的操作。 在`right.html`, `main.html`, `left.html`, `top.html`这些文件的基础上,根据具体需求,你可以进一步调整和扩展这些概念,构建出更复杂、功能丰富...

Global site tag (gtag.js) - Google Analytics