谷歌浏览器 onload(谷歌浏览器 安卓下载)
本篇文章给大家谈谈谷歌浏览器 onload，以及谷歌浏览器 安卓下载对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
本文目录
- 关于 火狐 浏览器 的 img 图片 加载 事件 onload 的 问题
- 如何重载浏览器 onload 事件后加载的资源文件
- window.showmodaldialog在火狐和谷歌浏览器中获取不到返回值
一、关于 火狐 浏览器 的 img 图片 加载 事件 onload 的 问题
这是因为各浏览器内核对于onload事件处理方式不一致所致。
页面加载完成后会触发 onload事件，通常下会使用 window.onload、 document.body.onload、 HTMLIFrame.onload方法来处理他；但是各浏览器对页面 onload事件处理方式并不一致，这些方法可能会导致页面加载完成后无法触事件处理函数。
window.onload与 document.body.onload事件相互关系不明确。
IE6 IE7 IE8中无法通过为属性赋值方式为 IFRAME元素绑定 load事件处理函数。
一、window.onload与 document.body.onload事件以及 BODY标签内的内联 onload事件，三者相互关系不明确
有关这两个事件在 W3C指定的规范中并没有说明其区别，由于 window对象属于 BOM范畴没有统一规范可依，各浏览器对其在此处的实现存有差异。
在微软的 MSDN中说明 document.body.onload属性是 window的 onload事件处理程序。其它浏览器厂商并没有对此属性做更细致解释。
<button onclick="alert(document.body.onload);">查看本页 document.body.onload事件</button>
<button onclick="alert(window.onload);">查看本页 window.onload事件</button>
<button onclick="alert(window.onload===document.body.onload);">查看document.body.onload事件与 window.onload事件是否为同一事件</button>
document.body.onload= function(){//函数 A
document.getElementById("A").innerHTML="document.body.onload被触发";
window.onload= function(){//函数 B
document.getElementById("B").innerHTML="window.onload被触发";
<span id="A" style="background:gold"></span>
<span id="B" style="background:gray"></span>
代码中分别对两种 onload属性赋值了不同的事件处理函数。其中 window.onload先于 document.body.onload被定义。如果他们两者使用的是同一事件处理源，则会发生 window对象中 onload事件定义被 body的事件处理函数所覆盖。
IE6 IE7 IE8 Firefox Chrome Safari Opera
document.body.onload事件函数函数 B函数 A函数 B
window.onload事件函数 null函数 B
两者事件处理函数是否一致 Flase Flase true
在 IE中 window.onload事件函数即使定义了，也会是 null，它的事件处理函数始终是为 document.body.onload提供的；
在 Firefox中 document.body.onload事件不与 window.onload事件相同，后者事件函数不会覆盖前者；
在 Chrome Safari Opera中 document.body.onload事件处理函数被后声明的 window.onload事件处理函数覆盖。
为了更明确以上猜测，我们将两个事件处理函数位置对调后再来观察实际效果：
window.onload= function()//函数 B{
document.getElementById("B").innerHTML="window.onload被触发";
document.body.onload= function(){//函数 A
document.getElementById("A").innerHTML="document.body.onload被触发";
这次试图使用 document.body.onload事件处理函数来覆盖 window.onload，实际运行结果如下：
IE6 IE7 IE8 Firefox Chrome Safari Opera
实际运行 document.body.onload被触发 window.onload.onload被触发 document.body.onload被触发
document.body.onload事件函数函数 A函数 A函数 A
window.onload事件函数 null函数 B
两者事件处理函数是否一致 Flase Flase true
无论如何在 IE中 window.onload事件函数即使定义了，也会是 null，它的事件处理函数始终是为 document.body.onload提供的。
在 Firefox中只有 window.onload事件会触发页面加载完成事件，document.body.onload只是个由用户扩展的方法，并不触发相应事件处理函数。这也说明了为什么仅在 Firefox浏览器中，两者"事件"函数均被保留。
在 Chrome Safari Opera中页面加载完成事件由 document.body.onload和 window.onload两者的事件处理函数定义顺序有关，后定义的覆盖之前定义的，两者最终会使用同一事件源函数处理事件内容。
在实际应用中 onload事件还可能被写在 BODY标签的属性内，而不在脚本标签中定义他的处理函数。此时代码如下：
<body onload="alert('overridden window onload')">
此用例中首先在脚本标签内为 window.onload事件附加了处理函数，然后有在 BODY标签内写入 onload事件处理代码。如果 BODY标签内的 onload事件处理与 window.onload事件处理不同，就会弹出两次对话框，并且可以根据对话框出现的顺序判断哪个 onload事件处理在前。反之则只会弹出一个对话框，如果仅出现"window onload"字样提示就说明 BODY标签内 onload属性无效，如果出现“overridden window onload”提示就说明 BODY标签内 onload事件与 window.onload事件为同一事件处理机制，后者覆盖了前者。
IE6 IE7 IE8 Firefox Chrome Safari Opera
实际运行”overridden window onload“
两者均代表 window onload事件 true
可见，在所有浏览器中均将，BODY标签内的内联 onload事件处理等同与 window.onload事件处理。
结合上文说明可知， Firefox中 BODY标签内的 onload事件属性与脚本标记内写入的 document.body.onload事件并不一致。
二、IE6 IE7 IE8中无法通过为属性赋值方式为 IFRAME元素绑定 load事件处理函数
某些情况下可能需要为 IFRAME标记动态添加 onload监听事件，其实现方法有通常有三种：
直接为 HTMLIFrameElement.onload属性为 IFRAME标记赋值事件处理函数
使用 HTMLIFrameElement.setAttribute方法为 IFRAME标记赋值事件处理函数
使用事件监听方式为 IFRAME的 onload事件绑定处理函数
根据 DOM规范推荐使用第三种处理方式，但是由于规范在不断修正添加中，浏览器开发时可能相应的标准规范并未出现或者并不完善，这导致了各个版本浏览对此问题的实现差异。
以下将依次分析这三种方式在各浏览器内的处理情况。
1.直接为 HTMLIFrameElement.onload属性为 IFRAME标记赋值事件处理函数
<div id="msgA">通过 HTMLIFrameElement.onload属性动态加入事件处理函数的 IFRAME没有触发 onload事件。</div>
<div id="msgB">静态 IFRAME没有触发 onload事件。</div>
document.getElementById("msgA").innerHTML="通过 HTMLIFrameElement.onload属性动态加入事件处理函数的 IFRAME已经触发 onload事件。";
document.getElementById("msgB").innerHTML="静态 IFRAME已经触发 onload事件。";
var iframeB= document.getElementById("ifarmeB");
var iframeA= document.createElement('iframe');
document.body.appendChild(iframeA);
<iframe id="ifarmeB" onload="iframeLoadB()"></iframe>
页面中存在两个 IFRAME标记，ifrmaeA标记为动态生成，并且动态为其 onload属性赋值了加载完成后的处理函数。而 iframeB标记则是在页面中静态存在的，其 onload属性对应的事件处理函数已经被固定写入。
运行此代码，在各个浏览器中效果如下：
IE6 IE7 IE8 Firefox Chrome Safari Opera
HTMLIFrameElement.onload= Function没有触发 onload事件触发 onload事件
静态 onload属性定义触发 onload事件
可见，在 IE浏览器中通过 HTMLIFrameElement.onload属性赋值方式无法响应 IFRAME标记的 onload事件。而其他浏览器均支持此写法。
2.使用 HTMLIFrameElement.setAttribute方法为 IFRAME标记赋值事件处理函数
将以上代码稍作修改，将 HTMLIFrameElement.onload赋值语句部分修改为 HTMLIFrameElement.setAttribute方法：
var iframeB= document.getElementById("ifarmeB");
var iframeA= document.createElement('iframe');
iframeA.setAttribute("onload","iframeLoadA()");
document.body.appendChild(iframeA);
此时 ifrmaeA标记的 onload属性以及事件处理函数被 DOM标准方法 setAttribute写入。
运行此代码，在各个浏览器中效果如下：
IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera
HTMLIFrameElement.setAttribute没有触发 onload事件触发 onload事件
静态 onload属性定义触发 onload事件
可见，在 IE系列浏览器中仅有 IE8(S)支持通过 setAttribute方法为 IFRAME标记写入 onload属性以及其事件处理函数。而其他浏览器均支持此写法。
3.使用事件监听方式为 IFRAME的 onload事件绑定处理函数
再将以上代码稍作修改，使用 DOM规范中推荐的事件监听绑定方法为 IFRAME动态加入 onload事件处理函数：
function addEvent(eventName,element,fn){
if(element.attachEvent) element.attachEvent("on"+eventName,fn);
else element.addEventListener(eventName,fn,false);
var iframeB= document.getElementById("ifarmeB");
var iframeA= document.createElement('iframe');
addEvent("load",iframeA,iframeLoadA);
document.body.appendChild(iframeA);
代码中为了兼容 IE私有的事件绑定方式，封装了名为 addEvent的处理函数，他为 IE和其他浏览器提供不同的事件绑定方法，以达到兼容效果。
运行此代码，在各个浏览器中效果如下：
IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera
onload事件监听绑定触发 onload事件
此时所有浏览器中为 IFRAME标记动态绑定的 onload事件处理方法均生效。
综合以上三种常见情况可以得出结论，除 IE以外的浏览器均支持对以上三种动态定义 onload事件处理函数的方法，而所有 IE系列浏览器对 HTMLIFrameElement.onload属性的赋值不被支持，他们可以通过 DOM标准方法 setAttribute来为 HTMLIFrameElement类型元素设置 onload属性，但是由于 IE8以下版本对 setAttribute方法支持有限，导致仅 IE8(S)下生效。最终 IE浏览器只能通过事件监听方式为 HTMLIFrameElement类型元素绑定 onload事件处理函数。
统一为 window对象的 onload事件绑定函数，避免在 Firefox中产生 document.body.onload事件理解歧义。
统一使用 DOM规范的事件监听方法（或 IE专有事件绑定方法）为 IFRAME标记绑定 onload事件处理函数。
二、如何重载浏览器 onload 事件后加载的资源文件
两个最佳的性能实践是增添一个远期的失效时间和增加延迟加载资源（特别是脚本）在onload事件之后。但是这些最佳实践的组合却导致了用户很难刷新资源的情况。更确切的说，点击重载（或甚至shift+重载）并不能在irefox, chrome, Safari, android,和 iPhone中刷新这些缓存的，延迟加载的资源。
浏览器有一个缓存（或10个），那里它保存响应的拷贝。如果用户感觉那些缓存的结果已经陈旧，她可以点击重载按钮忽略缓存并刷新一切，以此保证她看到的是网站内容的最新的拷贝。在HTTP规范中我找不到任何讨论重载按钮的资料，但据我所知所有浏览器都有这种特性。
如果你点击重载（或 control+R或 command+R)，所有资源将以有条件的GET请求方式刷新(携有是否自上次以来修改和是否不匹配的校验)。如果服务器响应的版本没有变化，它会返回简短的不含响应主体的“304 Not Modified”状态。如果响应改变则响应“200 OK”并返回全部的响应主体。
如果你点击shift+Reload(或r control+Reload或 control+shift+R或 command+shift+R)，那么所有的资源就会用不带校验头的方式刷新。由于每个响应主体都会返回，这要低效一些，但是确保了所有缓存的失真的响应都被覆盖重写。
最起码，我们希望点击重载的时候得到网站资源的最新版本而不管其失效时间，shift+重载会更积极的做到这些。
在Web1.0时代，资源通过HTML标签的方式请求—IMG, SCRIPT, LINK等等。在Web2.0，资源经常被动态请求。两个普遍的例子是异步加载脚本（例如Google Analytics）和图片动态获取（例如旋转灯笼式图片或下方区域图片延迟加载）。有时这些资源在窗口onload之后被请求，以使主页能更快的渲染提供更好的用户体验，更好的指标等等。如果资源有一个很久以后的失效时间，浏览器则需要特别的智能去做正确的事情。
如果用户以正常方式浏览到该页(点击一个link，输入一个URL，利用一个书签等等)而且动态的资源在缓存中，浏览器将使用缓存拷贝（假设失效时间仍在未来）
如果用户重载了该页，浏览器将重新获取所有资源，包括页面中动态加载的资源。
如果用户重载了该页，我想onload处理程序中加载的资源也同样被重新获取。这些可能是页面基础架构的一部分，它们应当在用户想刷新页面内容的时候重新获取。
但是如果用户重载页面的时候，有资源在onload事件之后加载，浏览器在该做什么？有些web应用通过保存数小时乃至数天的session来保持活动状态。如果用户重载了，所有在web应用生命期内的动态的资源会忽略cache重新获取吗？
我们看一个例子：Postonload Reload
这个页面用五种不同的方式加载图片与脚本：
标签–基础的HTML途径：<img src=和<script src=.
正文中动态–在页面正文中是一个脚本块，动态的创建一幅图片和一段脚本，设置SRC来获取资源。这些代码在onload之前执行。
加载时–在onload处理程序中动态的创建一段脚本和一幅图片。
加载后1 ms–通过在onload处理程序中的1毫秒setTimeout回调，动态的创建一段脚本和一幅图片。
加载后5秒–通过在onload处理程序中的5秒setTimeout回调，动态的创建一段脚本和一幅图片。
所有图片和脚本有一个未来一个月的失效期。如果用户点击重载，哪一个技术会重新获取？当然我们希望1和2可以引起重新获取。我希望3也重新获取。我想4应该会重新获取但是困惑于许多浏览器是否能做到，还有5可能不会重新获取。排一下你期待的结果然后看看下面的表格。
在看重载的结果以前，我们看一下如果用户只是浏览到该页会发生什么。这是通过点击例子中“try again”链接实现的。在这种情况下，没有资源被重新获取。所有的资源都标着未来一个月失效期被存入缓存，所以我测试的浏览器都只是从缓存中读出它们。这很好正如我们预期。
但是我们看下面表中捕获的重载的结果，行为变得分化了。
Table 1. Resources that are refetched rel="nofollow">Google, YouTube, Yahoo, Microsoft Live, Tencent QQ, Amazon和 Twitter。如果你用列出来的前四个浏览器，打开包嗅探器，重载这些网站的任何一个，你将看到一个奇怪的模式：可缓存的资源在onload之前加载，带有304响应状态，而onload之后的从缓存读出来并不会重新获取。唯一确保获得最新版本的办法是清空缓存，这使得重载按钮的期望价值破灭了。
这里是Amazon在Chrome浏览器下的请求瀑布流。红色竖线就是onload事件时刻。注意到多少资源在onload之间返回304状态。红线右侧onload之后一些图片不被缓存，所以被再请求返回200状态。而可以缓存的图片在onload之后都从缓存中读取，因此这些资源都得不到更新。
最后，无论何时都应该仔细研究不同浏览器的行为到底是为什么。经常一些行为优先于另一个，我们应该把这些特性和厂商对应起来。在重载页面的情况时，我们应该更一致地重新加载所有资源，即使是onload事件后的动态资源。
三、window.showmodaldialog在火狐和谷歌浏览器中获取不到返回值
1、function openwindows(){var obj= new Object();//打开模态子窗体,并获取返回值 var retval= window.showModalDialog("ordervideo.jsp?rderIds="+"0010,0020,0030",obj,"dialogWidth=500px;dialogHeight=500px");//for chrome if(retval== undefined){ retval= window.returnValue;} alert(retval);}
2、function onload(){//for chrome if(window.opener!= undefined){//window.opener的值在谷歌浏览器下面不为空，在IE/火狐下面是未定义，由此判断是否是谷歌浏览器 window.opener.returnValue= flag;//谷歌浏览器下给返回值赋值的方法window.opener.close();//这里必须关闭一次，否则执行下面的window.close()无法关闭弹出窗口，因为谷歌浏览器下弹出窗口是个新的window} else{ window.returnValue=flag;//这种赋值方法兼容IE/火狐，但不支持谷歌浏览器} window.close();}
3、您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
好了，文章到此结束，希望可以帮助到大家。
声明：信息资讯网所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，版权归原作者东方体育日报所有。若您的权利被侵害，请联系 删除。
本文链接：http://www.gdxhedu.com/news/111046.html
微信扫一扫