Chorme下iframe加载会出现两次大家有没有遇到过这种情况?在我的项目中就遇到这种问题了,所以我想把我的解决办法说一下以让大家不用在这个上面费时间,我的问题是在用JQuery插件SimpleModal的时候发现的,会加载两次html请求,后来一步一步调试加查看一下资料,iframe的onload会在chorme下调用两次,下面是一个小demo可以让你查看出来;
<html> <head></head> <body><div id="msg">状态:</div></body> <script> var msg = document.getElementById("msg"); var iframe = document.createElement("iframe"); iframe.onload = function(){ msg.innerHTML += "onload,"; } document.body.appendChild(iframe); iframe.src = "http://www.baidu.com" ; </script> </html>
请把这段代码放在chorme下和firefox下分别运行,会发现chorme下会调用两次onload方法,原因是:你是先把iframe append在body上,此时iframe调用了一次onload,但src是空的当然不会发生什么事情,然后给src赋值又调了一次,然后baidu被加载进来。怎么解决呢?知道了这个原理之后其实就很容易了,我们把赋值src放到append之前就好了,保证让iframe加在body之前给src赋值,如下:
<html> <head></head> <body><div id="msg">状态:</div></body> <script> var msg = document.getElementById("msg"); var iframe = document.createElement("iframe"); iframe.onload = function(){ msg.innerHTML += "onload,"; } iframe.src = "http://www.baidu.com" ; document.body.appendChild(iframe); </script> </html>
JQuery的弹框插件SimpleModal也有这个问题,用过这个插件的同学们不知道有没有发现chorme下会读到两次请求呢?其实问题就在于它的一段代码如下:
// create the overlay s.d.overlay = $('<div></div>') .attr('id', s.o.overlayId) .addClass('simplemodal-overlay') .css($.extend(s.o.overlayCss, { display: 'none', opacity: s.o.opacity / 100, height: s.o.modal ? w[0] : 0, width: s.o.modal ? w[1] : 0, position: 'fixed', left: 0, top: 0, zIndex: s.o.zIndex + 1 })) .appendTo(s.o.appendTo); // create the container s.d.container = $('<div></div>') .attr('id', s.o.containerId) .addClass('simplemodal-container') .css($.extend(s.o.containerCss, { display: 'none', position: 'fixed', zIndex: s.o.zIndex + 2 })) .append(s.o.close && s.o.closeHTML ? $(s.o.closeHTML).addClass(s.o.closeClass) : '') .appendTo(s.o.appendTo); s.d.wrap = $('<div></div>') .attr('tabIndex', -1) .addClass('simplemodal-wrap') .css({height: '100%', outline: 0, width: '100%'}) .appendTo(s.d.container); // add styling and attributes to the data // append to body to get correct dimensions, then move to wrap s.d.data = data .attr('id', data.attr('id') || s.o.dataId) .addClass('simplemodal-data') .css($.extend(s.o.dataCss, { display: 'none' })).appendTo('body'); data = null; s.setContainerDimensions(); s.d.data.appendTo(s.d.wrap);
请看最后两句,先是把s.d.data放在Body里,然后调用setContainerDimensions计算完位置后,又重新append到wrap上,这样两次append导致了请求了两次,javascript运行很快的,所以chomre下出现第一次请求还未完成就取消了,又重新请求的,这样在工程里会出现很多问题,那么解决方法就用上述demo的原理,改完如下:
// create the overlay s.d.overlay = $('<div></div>') .attr('id', s.o.overlayId) .addClass('simplemodal-overlay') .css($.extend(s.o.overlayCss, { display: 'none', opacity: s.o.opacity / 100, height: s.o.modal ? w[0] : 0, width: s.o.modal ? w[1] : 0, position: 'fixed', left: 0, top: 0, zIndex: s.o.zIndex + 1 })) .appendTo(s.o.appendTo); // create the container s.d.container = $('<div></div>') .attr('id', s.o.containerId) .addClass('simplemodal-container') .css($.extend(s.o.containerCss, { display: 'none', position: 'fixed', zIndex: s.o.zIndex + 2 })) .append(s.o.close && s.o.closeHTML ? $(s.o.closeHTML).addClass(s.o.closeClass) : '') .appendTo(s.o.appendTo); s.d.wrap = $('<div></div>') .attr('tabIndex', -1) .addClass('simplemodal-wrap') .css({height: '100%', outline: 0, width: '100%'}) .appendTo(s.d.container); // add styling and attributes to the data // append to body to get correct dimensions, then move to wrap s.d.data = data .attr('id', data.attr('id') || s.o.dataId) .addClass('simplemodal-data') .css($.extend(s.o.dataCss, { display: 'none' })); var tempSrc = data.find("iframe").attr("src"); data.find("iframe").removeAttr("src"); s.d.data.appendTo('body'); data = null; s.setContainerDimensions(); s.d.data.appendTo(s.d.wrap); s.d.data.find("iframe").attr("src",tempSrc);
我们先把src拿出来,这样append的时候就会是空的,就不会重复请求src中的url,等都append完后再把src换给他,解决!
相关推荐
另外,提及的Safari 5测试情况显示,可能在某些特定情况下,`iframe`的加载可能表现出异常,例如长时间没有响应。这可能是由于Safari 5对`iframe`加载的处理方式与其他浏览器不同,或者可能是由于网络延迟、资源加载...
在win7系统下,谷歌chorme浏览器很多时候会出现假死现在,页面有时会无反应(尤其是有弹出选择框时),但最大化最小化(F11)后恢复正常,但很快又无反应假死。附件中提出了解决假死的办法,绝对有效。
google chorme 谷歌 浏览器
chorme.dll
Chrome APP与普通的Web应用不同,它拥有更多的权限,例如访问文件系统、使用硬件设备、运行后台脚本等。开发者可以创建一个manifest.json文件来定义APP的基本信息,如名称、版本、权限等。在"内容.txt"中,可能包含...
标题“Chrome浏览器默认开启Flash”涉及的是Google Chrome浏览器与Adobe Flash Player之间的交互,尤其是在Chrome计划逐步淘汰Flash支持的背景下。Adobe Flash Player是一款广泛使用的多媒体软件平台,用于在Web上...
这个插件使得用户能够在Chrome浏览器环境下更加便捷地进行原型设计和预览,增强了设计师的工作效率。Chrome插件通常是为了扩展浏览器的功能,提供特定服务或增强浏览体验,AxureRP的Chrome插件也不例外,它将原型...
"AxureRP_for_chorme_zip.zip" 是一个专门为谷歌浏览器(Chrome)定制的扩展插件包,旨在帮助设计师在浏览器环境下预览和测试他们的Axure原型。 首先,我们要了解Axure RP的功能。它提供了丰富的控件库,用户可以...
Chrome浏览器上的Axure RP扩展程序则进一步提升了其便捷性,允许用户在浏览器环境下直接预览和编辑Axure原型。 " AxureRP_for_chorme_0_6_2" 是一个特定版本的Axure RP Chrome扩展程序,版本号为0.6.2。这个版本...
在这个“AxureRP_for_chorme_0_6_2 谷歌插件下载”中,我们关注的是Axure RP与谷歌浏览器的扩展集成。 首先,让我们来理解一下什么是Chrome插件。Chrome插件是基于谷歌浏览器的开放扩展平台(Chrome Web Store)...
6. **跨平台兼容**:Axure RP的Chrome扩展不仅适用于Windows,也支持Mac操作系统,确保多平台工作的无缝衔接。 使用"AxureRP_for_chorme"的流程大致如下: 1. 安装扩展:将下载的".crx"文件拖放到打开的Chrome...
嵌入式Chromium框架(简称CEF) 是一个由Marshall Greenblatt在2008建立的开源项目,它主要目的是开发一个基于Google Chromium的Webbrowser控件。CEF支持一系列的编程语言和操作系统,并且能很容易地整合到新的或已有...
此外,Axure RP还支持自定义动态面板和状态,以展示不同场景下的界面变化,这对于用户体验设计尤其有用。 Axure RP还提供了强大的注释和文档功能,用户可以在原型上添加注释和说明,以便团队成员理解和讨论设计...
这个“AxureRP_for_chrome.zip”压缩包文件是Axure RP的一个扩展,特别为谷歌Chrome浏览器定制,它允许用户在浏览器环境下直接打开和编辑Axure项目。 Axure RP的特点在于它的易用性和灵活性,支持绘制各种形状、...
在IT领域,尤其是在Web开发和调试中,"谷歌插件学习 监听网络请求"是一个重要的主题。这个标题指的是利用谷歌浏览器(Chrome)的开发者工具来观察和分析网页中的网络活动,特别是异步请求。这样的技能对于理解网页的...
多标签的用途太多了,特别在现在的发展下,功能型软件主打都是可分页、可分屏、自适应、高度自由组合等等要求。多标签灵活,功能更加密集,适合分屏、多屏的使用;比如说炒股的就需要多屏,那么就要可分离标签来搞定...
1.插件:AxureRP_for_chorme_0_6_2.zip 下载后解压. 2.安装过程:在Chrome浏览器中输入 chrome://extensions/ 网址 3.打开开发者模式 4.加载已解压的拓展程序,选中,点选中文件夹. 5.安装成功,再打开RP即可.
离线安装,非常好用!!离线安装,非常好用!!离线安装,非常好用!!离线安装,非常好用!!离线安装,非常好用!!(凑字数……)
标题 "AxureRP_for_chorme-72ffed5d45537f3f3b5aa9d3d88d1046f78889f7.zip" 提示我们这是一个与 Axure RP 相关的 Chrome 浏览器插件。Axure RP 是一款广泛使用的原型设计工具,它允许设计师快速创建交互式原型,以...