blocks|key|1625410|text|你可以使用javascript来做这件事。如果你不知道如何使用javascript，我建议你通过some+tutorials+first来阅读。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1625411|在您对javascript有了基本的了解之后，您可以通过使用window.onload事件来检测页面何时加载。|style|CODE|1625412|window.onload+=+function()+{
++addPageContents();++//example+function+call.
}|code-block|syntax|javascript|1625413|编辑:如果你想添加多个onload函数，而不是使用javascript库，你可以包装你自己的onload处理程序。|1625414|window.whenloaded+=+function(fn)+{
++if+(window.onload)+{
++++var+old+=+window.onload;
++++window.onload+=+function()+{
++++++old();
++++++fn();
++++}
++}+else+{
++++window.onload+=+fn;
++}
}|1625415|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/js/default.asp|1|https://developer.mozilla.org/en/A_re-introduction_to_JavaScript|2|http://eloquentjavascript.net/contents.html^0|1C|4|0|1H|9|1|1R|5|2|0|U|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]|$A|16|B|17|1|18]|$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@$A|1D|B|1E|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1I|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

You would use javascript to do this. If you don't know how to use javascript, I would recommend reading through <a href="http://www.w3schools.com/js/default.asp" rel="noreferrer">some</a> <a href="https://developer.mozilla.org/en/A_re-introduction_to_JavaScript" rel="noreferrer">tutorials</a> <a href="http://eloquentjavascript.net/contents.html" rel="noreferrer">first</a>.

After you have a basic understanding of javascript, you can detect when a page has loaded by using the <code>window.onload</code> event.

<pre><code>window.onload = function() {
 addPageContents(); //example function call.
}
</code></pre>

Edit: If you want to add more than one onload function, and not use a javascript library, you can wrap your own onload hanlder.

<pre><code>window.whenloaded = function(fn) {
 if (window.onload) {
 var old = window.onload;
 window.onload = function() {
 old();
 fn();
 }
 } else {
 window.onload = fn;
 }
}
</code></pre>

blocks|key|4127365|text|为什么不使用监听器呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4127366|//+Everything+but+IE
window.addEventListener("load",+function()+{
++++//+loaded
},+false);+

//+IE
window.attachEvent("onload",+function()+{
++++//+loaded
});|code-block|syntax|javascript|4127367|通过这种方式，您可以添加任意数量的侦听器，还可以分离它们！removeEventListener和detachEvent。|offset|length|style|CODE|4127368|entityMap^0|0|0|T|J|1D|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Why not use listeners?

<pre><code>// Everything but IE
window.addEventListener("load", function() {
 // loaded
}, false); 

// IE
window.attachEvent("onload", function() {
 // loaded
});
</code></pre>

This way you can add as many Listeners as you want, you can also detach them! <code>removeEventListener</code> and <code>detachEvent</code>.

blocks|key|2017104|text|比onload更好的是使用现有框架的函数，因为onload有时会在加载所有资源(图像等)后响应，而不仅仅是页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2017105|例如jQuery：|2017106|$(document).ready(+function()+{
++++//+do+stuff
})|code-block|syntax|javascript|2017107|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Better than onload is to use a function of an existing framework, because onload does sometimes respond after all the resources (images and so on) are loaded and not only the page.

For example jQuery:

<pre><code>$(document).ready( function() {
 // do stuff
})
</code></pre>

blocks|key|2017160|text|您的查询可以通过以下有用的链接轻松解决：OnLoad+W3School|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2017161|如果您想要加载状态：|2017162|您可以使用simple+Javascript来完成此操作|style|BOLD|2017163|if+(document.readyState+==+"complete")+{
++++alert("Your+page+is+loaded");
}|code-block|syntax|javascript|2017164|返回值：字符串，表示当前文档的状态。|2017165|以下五个值之一：|2017166|2017167|未初始化-尚未开始加载|unordered-list-item|2017168|加载-+Is+loading|2017169|loaded+-+Has+it+loaded|2017170|interactive+-已加载足够的内容，用户可以与之交互|2017171|complete-|2017172|2017173|-+Fully+|2017174|有关更多详细信息，请访问W3Schools+-+document.readystate。|2017175|希望这能帮你理清思路。|2017176|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/event_onload.asp|1|https://www.w3schools.com/jsref/prop_doc_readystate.asp^0|K|F|0|0|0|5|H|0|0|0|3|0|0|0|0|0|0|0|0|0|0|C|V|1|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|D|3|E|5|6|7|1P|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1Q|8|@$A|1R|B|1S|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1T|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1U|8|@$A|1V|B|1W|H|I]]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1X|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|T|3|U|5|V|7|1Z|8|@]|9|@]|C|$]]|$1|W|3|X|5|V|7|20|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|V|7|21|8|@]|9|@]|C|$]]|$1|10|3|11|5|V|7|22|8|@]|9|@]|C|$]]|$1|12|3|13|5|V|7|23|8|@]|9|@]|C|$]]|$1|14|3|-4|5|V|7|24|8|@]|9|@]|C|$]]|$1|15|3|16|5|6|7|25|8|@]|9|@]|C|$]]|$1|17|3|18|5|6|7|26|8|@]|9|@$A|27|B|28|1|29]]|C|$]]|$1|19|3|1A|5|6|7|2A|8|@]|9|@]|C|$]]|$1|1B|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]]|1C|$1D|$5|1E|1F|1G|C|$1H|1I]]|1J|$5|1E|1F|1G|C|$1H|1K]]]]

Your query can be solved easily by this helpful link: <a href="https://www.w3schools.com/jsref/event_onload.asp" rel="noreferrer">OnLoad W3School</a>

If you want loading status:

You can do that using simple Javascript

<pre><code>if (document.readyState == "complete") {
 alert("Your page is loaded");
}
</code></pre>

Return Value: A String, representing the status of the current document.

One of five values:

<ul>
<li>uninitialized - Has not started loading yet</li>
<li>loading - Is loading</li>
<li>loaded - Has been loaded</li>
<li>interactive - Has loaded enough and the user can interact with it</li>
<li>complete - Fully loaded</li>
</ul>

For more details visit <a href="https://www.w3schools.com/jsref/prop_doc_readystate.asp" rel="noreferrer">W3Schools - document.readystate</a>.

Hope this clears your thoughts.

blocks|key|2017012|text|在Javascript中，有onload事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2017013|编辑:示例：|2017014|<html>
++<head>...</head>
++<body+onload="doSomethingWhenPageIsLoaded();">
++++...
++</body>
</html>|code-block|syntax|javascript|2017015|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_onload.asp^0|E|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

In Javascript, you have the <a href="http://www.w3schools.com/jsref/jsref_onload.asp" rel="nofollow noreferrer">onload</a> event.

Edit: an example:

<pre><code>&lt;html&gt;
 &lt;head&gt;...&lt;/head&gt;
 &lt;body onload="doSomethingWhenPageIsLoaded();"&gt;
 ...
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|4127284|text|Javascript的OnLoad事件可以做您想要做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4127285|<body+onload="somefunc();">|code-block|syntax|javascript|4127286|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Javascript's OnLoad event for the body does what you want.

<pre><code>&lt;body onload="somefunc();"&gt;
</code></pre>

blocks|key|5544950|text|使用onLoad()事件的Javascript将在执行之前等待页面加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5544951|<body+onload="somecode();"+>|code-block|syntax|javascript|5544952|如果您使用的是jQuery框架的document+ready函数，则代码将在DOM加载后、页面内容加载之前立即加载：|5544953|$(document).ready(function()+{
++++//+jQuery+code+goes+here
});|5544954|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/jsref_onload.asp^0|2|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

Javascript using the <a href="http://www.w3schools.com/jsref/jsref_onload.asp" rel="nofollow noreferrer">onLoad()</a> event, will wait for the page to be loaded before executing.

<pre><code>&lt;body onload="somecode();" &gt;
</code></pre>

If you're using the jQuery framework's document ready function the code will load as soon as the DOM is loaded and before the page contents are loaded:

<pre><code>$(document).ready(function() {
 // jQuery code goes here
});
</code></pre>

blocks|key|1625473|text|我知道关于这个主题有很多答案，但我相信最好的解决方案是混合使用多个解决方案，以防您不知道脚本何时运行(在我的例子中，客户端可以在窗口加载之前或事件之后粘贴脚本)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1625474|if+(document.readyState+==+"complete")+{
++++alert("Your+page+is+loaded");
}else{
++++window.addEventListener("load",+function()+{
++++++++alert("Your+page+is+loaded");
++++},+false);
}|code-block|syntax|javascript|1625475|您可以创建一个具有此行为的函数，并附加一个回调函数来执行您需要的任何操作。|1625476|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I know there are a lot of answers on this topic, but I believe the best solution is a mix of more than one, in case you don't know when your script is going to run (in my case a client could paste the script before the window load or after that event).

<pre><code>if (document.readyState == "complete") {
 alert("Your page is loaded");
}else{
 window.addEventListener("load", function() {
 alert("Your page is loaded");
 }, false);
}
</code></pre>

You could create a function with this behavior and attach a callback function that does whatever you need.

blocks|key|1628844|text|我更喜欢这个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1628845|+/**
++*+The+addEventListener()+method+attaches+an+event+handler+to+the+specified+element.
++*+@param+{*}+event+Type+of+the+event+(like+'load',+'click'+or+'onchange'+...)
++*+@param+{*}+obj+When+the+event+occurs,+an+event+object+is+passed+to+the+function+as+the+first+parameter.+The+type+of+the+event+object+depends+on+the+specified+event
++*+@param+{*}+fn+Specifies+the+function+to+run+when+the+event+occurs.+
++*/
+function+addListener(event,+obj,+fn)+{
++++if+(obj.addEventListener)+{
+++++++obj.addEventListener(event,+fn,+false);+++//+modern+browsers
++++}+else+{
+++++++obj.attachEvent("on"%2Bevent,+fn);++++++++++//+older+versions+of+IE
++++}
}


//+Thge+event+emitter+will+be+emitted+when+page+is+loaded
addListener('load',+window,+function(event)+{
++++alert("Your+page+is+loaded");
});|code-block|syntax|javascript|1628846|当然，您可以添加更多不同的addEventListener，例如click、onChange等。|offset|length|style|CODE|1628847|entityMap^0|0|0|D|G|W|5|12|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

I prefer this solution:

<pre><code> /**
 * The addEventListener() method attaches an event handler to the specified element.
 * @param {*} event Type of the event (like 'load', 'click' or 'onchange' ...)
 * @param {*} obj When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event
 * @param {*} fn Specifies the function to run when the event occurs. 
 */
 function addListener(event, obj, fn) {
 if (obj.addEventListener) {
 obj.addEventListener(event, fn, false); // modern browsers
 } else {
 obj.attachEvent("on"+event, fn); // older versions of IE
 }
}


// Thge event emitter will be emitted when page is loaded
addListener('load', window, function(event) {
 alert("Your page is loaded");
});
</code></pre>

Of course, you can add more different <code>addEventListener</code>, for example <code>click</code>, <code>onChange</code> etc.

blocks|key|2017209|text|if(window.readyState+===+'completed'){
//+code+to+be+executed+when+the+webpage+is+loaded
}
else{
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2017210|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>if(window.readyState === 'completed'){
// code to be executed when the webpage is loaded
}
else{
}
</code></pre>

I want to write an application that detects when a page is loaded in the browser, then I should be able to insert content on top of the loaded web page? Anybody with an idea on how to do that?

Please note that I should be able to do this in any browser (Firefox/IE).

What language should I use to help me do this?

How do I detect this from an external application?

How should I integrate this with the browser?

How do I detect when a web page is loaded?

33 天实现自己的 AI 进化论？发文瓜分机械键盘、耳机等万元奖池！点击参加活动：<a href="https://cloud.tencent.com/developer/article/2503022" target="_blank">https://cloud.tencent.com/developer/article/2503022</a> 
 <img src="https://qcloudimg.tencent-cloud.cn/raw/01543e0407db10898a7ee9f420794432.jpg"/>

技术创作特训营有奖征文

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯云AI代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

文章&问答评论现已支持表情

我想要编写一个应用程序来检测何时在浏览器中加载页面，然后我应该能够在加载的网页上插入内容？谁有办法做到这一点？请注意，我应该能够在任何浏览器(Firefox/IE)中执行此操作。我应该使用哪种语言来帮助我做到这一点？如何从外部应用程序中检测到这一点？我应该如何将其与浏览器集成？

问如何检测网页何时加载？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测网页何时加载？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何检测网页何时加载？
EN