开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

window.onload并不总是在chrome中工作

window.onload是一个JavaScript事件，它在网页中所有的资源（如图片、样式表、脚本等）都加载完成后触发。然而，有时候在Chrome浏览器中，window.onload事件可能无法正常工作。

这个问题通常是由于以下原因之一导致的：

缓存：Chrome浏览器可能会缓存网页的资源，导致window.onload事件在页面重新加载时不会被触发。解决这个问题的方法是在开发过程中禁用缓存，或者使用Ctrl + F5强制刷新页面。
异步加载：如果网页中的脚本是通过异步加载的方式引入的，那么window.onload事件可能会在脚本加载完成之前触发。解决这个问题的方法是使用DOMContentLoaded事件，它会在DOM树构建完成后触发，而不需要等待所有资源加载完成。
脚本错误：如果网页中的脚本存在错误，可能会导致window.onload事件无法触发。在Chrome浏览器中，可以打开开发者工具（F12），查看控制台中是否有任何错误信息。

总结起来，为了确保window.onload事件在Chrome浏览器中正常工作，可以采取以下措施：

禁用缓存或者使用强制刷新来避免缓存问题。
使用DOMContentLoaded事件来替代window.onload事件，以确保在DOM树构建完成后执行相应的操作。
检查网页中的脚本是否存在错误，确保没有任何错误导致window.onload事件无法触发。

腾讯云相关产品和产品介绍链接地址：

腾讯云开发者平台：https://cloud.tencent.com/developer
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent Real-Time 3D）：https://cloud.tencent.com/product/trtc

相关搜索:SFINAE并不总是在C++中工作？web组件组合并不总是在Chrome中正确呈现 PyCharm并不总是在新图形中绘图 Quartz.Net工作并不总是在运行 - 找不到任何理由 Google Vision并不总是在web检测响应中包含pagesWithMatchingImages s3视频并不总是在chrome上播放，但可以在火狐上播放 Crashlitycs崩溃报告并不总是在日志中显示Firebase Analitycs数据 Window.onload在JSP中是如何工作的？焦点-在chrome中工作，但不在firefox中工作 .sort不能在火狐中工作，但能在chrome中工作 127.0.0.1可以在Chrome中工作，但在Edge中不能工作为什么当我使用IDragHandler IPointerEnterHandler拖动某些东西时，并不总是在另一个对象上工作？javascript onclick提醒不在chrome中工作 addeventlistener仅在chrome中不能正常工作如何更改变量来规避Chrome中的内联javascript window.onload计时器 -Directory交换机在Powershell中并不总是正常工作 Flex可以在chrome中工作，但不能在IE中工作 CSS过渡在chrome中工作，但不能在safari中工作字体IranSansX在chrome中无法正常工作 Javascript在JSfiddle中工作，但不能在Chrome或IE中工作

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

window的onload事件和domcontentloaded执行顺序

上述三个图分别为chrome edge和Firefox，我们发现他们的结果都是一样的，先执行documentloded事件，然后再执行window.onload事件。...window.onload和body中onload 我们在写代码的过程中经常也会在body标签上添加onload，那么documentloded，window.onload和body中onload哪一个会先执行哪一个会后执行呢...注意，尽管DOM总是在页面完全加载之前就绪，但是在 .ready()处理程序期间执行的代码中附加加载事件侦听器通常不安全。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行，但是窗口的加载事件已经发生，并且这些侦听器永远不会运行。...所以jq的ready事件执行结束时间和DOMContentLoaded结束时间并不是完全相同的，所以在使用过程中应当进行一些注意。

3.7K1 0

DOMContentLoaded和window.onload

都知道window.onload吧，可是并非每一个人都知道DOMContentLoaded，事实上即使你不知道。非常有可能你也常常使用了这个东西。...普通情况下，DOMContentLoaded事件要在window.onload之前运行，当DOM树构建完毕的时候就会运行DOMContentLoaded事件，而window.onload是在页面载入完毕的时候...我们并不须要图片元素。加上有时候载入外域图片的速度很缓慢。.../delay.png'); 在firefox和chrome以及opera中都能够清楚的看到，在图片未载入之前。id为status的段落已经显示了“DOM is ready now!”。...此代码并不能在IE中工作，一方面是由于我使用的是addEventListener，開始前做了个推断，不存在此方法则不加入此事件。

1.5K5 0

网站性能优化(二)一定要将CSS置于顶部，JS置于底部吗？

“CSS文件在header中引入，JS文件在body底部引入”，这条建议在前端界几乎是黄金法则。首先，笔者声明，坚决支持这条法则！...只不过，在现代浏览器中，尤其是Chrome，已经对浏览器渲染做了极大的优化。哪怕并未遵从这条规矩，恐怕也不会引发太大的性能问题。（注：下面提到的浏览器仅限于chrome） 1....因此，Chrome支持并发下载资源文件（参考《WebKit技术内幕-朱永盛》）。...做重排(layout)和重绘(paint)工作； 3.小结为了提高性能，真正需要关心的是“首次必须加载哪些CSS和JS？”，尽可能通过异步方式加载那些并不是首屏必需的外部文件。...加载事件一般在window.onload事件中触发，这时，页面已经完全呈现（相应的资源文件下载完毕），只需要动态创建标签或者标签即可，如下（注意：动态加载文件也可以利用浏览器缓存

8584 0

javascript中的内存管理

同样的，在javascript中，内存管理也是自动进行的，虽然有自动的内存管理措施，但是这并不意味着程序员就不需要关心内存管理了。本文将会进行详细的介绍javascript中的内存管理策略。...在nodejs中我们可以添加–inspect，然后借助Chrome Debugger来完成这个工作： node --expose-gc --inspect index.js 上面的代码将会开启nodejs...使用Chrome devTools进行调试的前提是我们已经开启了 –inspect模式。在chrome中输入chrome://inspect： ?...我们可看到chrome inspect的界面，如果你本地已经有开启inspect的nodejs程序的话，在Remote Target中就可以直接看到。...; window.onload=function() { var obj = document.getElementById("element"); obj.onclick = doesNotLeak

4543 0

javascript中的内存管理

同样的，在javascript中，内存管理也是自动进行的，虽然有自动的内存管理措施，但是这并不意味着程序员就不需要关心内存管理了。本文将会进行详细的介绍javascript中的内存管理策略。...在nodejs中我们可以添加–inspect，然后借助Chrome Debugger来完成这个工作： node --expose-gc --inspect index.js 上面的代码将会开启nodejs...使用Chrome devTools进行调试的前提是我们已经开启了 –inspect模式。...在chrome中输入chrome://inspect：我们可看到chrome inspect的界面，如果你本地已经有开启inspect的nodejs程序的话，在Remote Target中就可以直接看到...选中你要调试的target，点击inspect，即可开启Chrome devTools调试工具：你可以对程序进行profile，也可以进行调试。

5161 1

Ajax与DOM实现动态加载

首先说下问题背景：想要通过异步请求一个文本文件，然后通过该文件的内容动态创建一个DOM节点添加到网页中。...(txt);//把文本节点添加到p标签节点 document.getElementById("test").appendChild(para);//把p标签节点，添加到div中...; if(typeof window.onload !...= 'function'){ window.onload = func; }else{ window.onload...Chrome处理本地Ajax异步请求　　由于Chrome不支持本地的异步请求，因此直接通过file://访问文件就会报错！

1.6K10 0

【前端】：async、defer、onload、DOMContentLoaded

; }); window.onload = function(){ console.log("onload!")...; }); window.onload = function(){ console.log("onload!")...; }); window.onload = function(){ console.log("onload!")...行为模拟：在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll..., new Date()); }); window.onload = function(){ console.log("onload!"

1.9K2 0

如何快速地开发一个chrome扩展插件

在这些文件中，有一个manifest.json文件，它是扩展的描述文件，定义了扩展的名称和版本号等信息。...通过使用devtools_page属性，我们就可以将我们的扩展加入到调试工具栏的一个tab中。..."devtools_page": "devtools.html" 我们在devtools.html中只需要添加一个js引入语句就可以。...({ type: "color-divs" }); } } devtools.html window.onload = function() {...浏览器的扩展开发其实并不难，用到的知识都是基础的js，html，css，我们只需要知道一些和浏览器交互的属性和操作的api，就可以开发出一个属于自己的浏览器扩展。

4852 0

从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象

在浏览器中的一些操作都可以使用 BOM 的方法进行编程处理。比如：刷新浏览器、前进、后退、在地址栏输入 URL 等。...2、使用 window.onload 事件。...2、window.onload 事件会在页面加载完毕（页面中所有内容、标签、属性以及外部引入的 js文件）时触发。 3、window.onload 可以省略 window。...://fengdaoting.com"); }; location.href 和 location.assign()：设置跳转的页面地址，这两个属性和方法作用相同，并且都保存跳转前的地址（在浏览器中可以点击返回按钮...下结果：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186

6733 0

js动画和css动画_js文件怎么引入html

当offsetParent为body时情况比较特殊: 在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body...准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14、safari 5则弹出“undefined”。...虽然结果不同，但是可以发现chrome和safari也都和火狐一样，顺利地读取到了属性值。...不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。...而且兼容写法并不复杂，你掌握了吗？

22.1K2 0

使用原生 JavaScript 在页面加载完成后处理多个函数

网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能。...W3C 的标准方法叫做 addEventListener ，被IE9，chrome，firefox，opera所支持，写法： window.addEventListener('load',function...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发，我们将 JavaScript 代码写进 onload 事件中，就可以保证在 HTML 元素被加载完成之后，...页面中无法出现多个 window.onload 事件，如果出现了多个 onload 事件，那么后面的内容会覆盖前面的。...那么，我们可以这样做，在一个 window.onload 事件中，写上所有需要加载的函数名，然后在外面定义函数： window.onload = function(){ func1(); func2

2.8K2 0

phantomJs之殇，chrome-headless之生 | 洞见

技术雷达快讯：自2017年中以来，Chrome用户可以选择以headless模式运行浏览器。此功能非常适合运行前端浏览器测试，而无需在屏幕上显示操作过程。...虽然Phantom.js 是fully functional headless browser，但是它和真正的浏览器还是有很大的差别，并不能完全模拟真实的用户操作。...Headless Chrome 是 Chrome 浏览器的无界面形态，可以在不打开浏览器的前提下，使用所有Chrome支持的特性，在命令行中运行你的脚本。...推出后，我们将phantomjs切换成Headless Chrome，再也没有出现过异常情况，切换也非常简单，只需要把karma.conf.js文件中的配置改下就OK了。...---- 总结目前Headless Chrome仍然存在一些问题，还需要不断完善，我们应该拥抱变化，适应它，让它给我们的工作带来更多帮助。 ----

1.8K6 0

JavaScript DOM编程艺术读书笔记

1.4.2 浏览器战争的解决 1.4.3 暂新的起点 WebKit是Safari和Chrome采用的一个开源Web浏览器引擎。...1.5 小结第二章 JavaScript语法 2.1 准备工作程序设计语言分为解释型和编译型两大类。编译型语言的错误在代码编译阶段就能被发现。...字面量literal:可以直接在JavaScript代码中写出来的数据。...DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。第四章案例研究：JavaScript图片 <!...='function'){ window.onload=func; }else{ window.onload=function(){

9452 0

js中clientWidth, scrollWidth, innerWidth, outerWidth和offsetWidth属性的区别

js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总，测试浏览器：ie7~ie11、chrome 和 firefox等...relative;left: 140px;top: 90px;} window.onload...relative;left: 140px;top: 90px;} window.onload...ie7~ie11、chrome 和 firefox 结果一致，如下： ? （3）图解结果 ?...三、测试3：window对象的 outerWidth、innerWidth、pageXOffset 和 screenLeft（screenX）（1）测试代码 window.onload

2.3K2 0

使用Vue开发Chrome插件

B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。...要导入 Element-ui 也十分简单，Vue.use(ElementUI); Vue2 中怎么导入 element，便怎么导入。...ul-leave-active { transition: all 0.5s; } .ul-enter, .ul-leave-to { height: 0; } 相关逻辑可自行观看，这里不在赘述了，并不复杂...后续我都会使用 JQuery 来进行操作在 src/content-script/bilibili.js 中写下如下代码 window.onload = function () { console.log...1606.0万顶级画质总播放数2368406 这些数据肯定单纯的输出肯定是没什么作用的，要能显示到内嵌悬浮窗口，或者是 popup 页面上（甚至发送 ajax 请求到远程服务器上保存）对上面代码微改一下 window.onload

3.4K2 0

网站性能优化(三)异步加载脚本

code1.png （在Chrome下测试，三张图片只会有两张被阻塞。我猜测，Chrome是想做某些优化的，但是，显然优化的不够彻底。...loading2.png 但是这种方式会阻塞window.onload事件，参考chrome developer timeline: timeline-script.png 优点:：支持跨域加载脚本文件...Script in Iframe 创建了一个隐藏的iframe标签，设置其src值为JS代码，然后插入到主页面中。这种方式在实际项目中很少用到，因为iframe是开销最高的DOM元素。...常用场景是显示广告（广告一般需要运行在隔离环境中，iframe很合适）。...所以需要在HTML文档中把外部脚本转成行内脚本。和XMLHttpRequest一样，iframe不支持跨域加载脚本，且脚本无序执行。 5.

1.4K3 0

JQuery 封装 Ajax Post 请求示例

html> ajax-post window.onload...oBtn.onclick = function () { let xhr; // code for IE7+, Firefox, Chrome..., 如果出现了中文需要转码 // 可以调用encodeURIComponent方法 // URL中只可以出现字母/数字/下划线/ASCII码 res.push(...value; let str = obj2str(obj); // 1.创建一个异步对象 let xmlHttp, timer; // code for IE7+, Firefox, Chrome...let str = obj2str(option.data); // 1.创建一个异步对象 let xmlHttp, timer; // code for IE7+, Firefox, Chrome

2620 0

HTML5管理与实际历史的分析(history物)

可是，浏览器并不会想server发送请求。即使历史状态改变之后查新location.href也会返回与地址栏中同样的地址。...支持HTML5历史状态管理的浏览器有Chrome、Safari 5+、Firefox 4+和Opera 11.5+。...在Safari和Chrome中，传递给pushState()或replaceState()的状态对象中不能包括DOM元素。而Firefox支持在状态对象中包括DOM元素。...> JavaScript代码 //onhashchange : 事件 : 当hash值改变的时候触发的事件 //hash改变就会出现就会出现历史管理 window.onload...pushState : 三个參数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选) //history.pushState({name: "menglong"}, '', "li.html"); window.onload

4002 0

再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

DOM的工作模式是：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。...然而，在IE中，并不支持getComputedStyle，IE提供了currentStyle属性。...缺点:在标准浏览器中正常，但在IE6/7/8中不支持 window.onload = function () { var oBtn = document.getElementById('btn')...event.srcElement : event.target; innerText的问题 innerText在IE中能正常工作，但是innerText在FireFox中却不行。...IE8下querySelectorAll不支持伪类有时候伪类是很好用，IE8并不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是伪类，我们在任何时间都不要使用它们

9674 0

Ajax学习计划

缓存：chrome下的缓存还不是很严重，IE下的缓存比较严重，除非关闭浏览器。缓存的工作原理：通过URL进行缓存的。通常可以使用URL?...t= + new Date().getTime() window.onload = function (){ var oBtn = document.getElementById('Btn1');...alert(str); },function(){ alert('失败'); }); } } 通过Ajax读取的都是字符串通过eval()将文件内容解析成JS可以识别的内容 window.onload...){ var SA = eval(str); alert(SA[1]); },function(){ alert('失败'); }); } } 读取Json文件 window.onload

5341 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭