Question

我想编写一个应用程序来检测浏览器中何时加载页面，然后我应该能够在加载的网页上插入内容？谁知道如何做到这一点？

请注意，我应该可以在任何浏览器（Firefox / IE）中执行此操作。

我应该使用哪种语言来帮助我这样做？

如何从外部应用程序中检测到这一点？

我应该如何将其与浏览器集成？

Answer 1

您可以使用javascript来执行此操作。如果您不知道如何使用javascript，我建议您通过some tutorials first阅读。

在对javascript有基本了解之后，您可以使用window.onload事件检测页面何时加载。

window.onload = function() {
  addPageContents();  //example function call.
}

编辑：如果你想添加多个onload函数，而不是使用javascript库，你可以包装你自己的onload hanlder。

window.whenloaded = function(fn) {
  if (window.onload) {
    var old = window.onload;
    window.onload = function() {
      old();
      fn();
    }
  } else {
    window.onload = fn;
  }
}

Answer 2

为什么不使用听众？

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

// IE
window.attachEvent("onload", function() {
    // loaded
});

通过这种方式，您可以根据需要添加任意数量的侦听器，也可以将它们分离！ removeEventListener和detachEvent。

Answer 3

比onload更好的是使用现有框架的功能，因为onload有时会在加载所有资源（图像等）之后响应，而不仅仅是页面。

例如jQuery：

$(document).ready( function() {
    // do stuff
})

Answer 4

您的查询可以通过以下有用的链接轻松解决：OnLoad W3School

如果您想要加载状态：

您可以使用简单Javascript

来实现

if (document.readyState == "complete") {
    alert("Your page is loaded");
}

返回值：一个字符串，表示当前文档的状态。

五个值中的一个：

未初始化 - 尚未开始加载
loading - 正在加载
已加载 - 已加载
interactive - 已加载足够且用户可以与之交互
完成 - 满载

有关详细信息，请访问W3Schools - document.readystate。

希望这能清除你的想法。

Answer 5

在Javascript中，您有onload事件。

编辑：一个例子：

<html>
  <head>...</head>
  <body onload="doSomethingWhenPageIsLoaded();">
    ...
  </body>
</html>

Answer 6

使用onLoad()事件的Javascript将在执行前等待页面加载。

<body onload="somecode();" >

如果你正在使用jQuery框架的文档就绪函数，代码将在加载DOM之后和加载页面内容之前加载：

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

Answer 7

我知道有关此主题的答案很多，但我相信最好的解决方案是将多个解决方案混合使用，以防万一您不知道脚本何时运行（在我的情况下，客户端可以在窗口加载之前或该事件之后粘贴脚本。

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

您可以使用这种行为创建一个函数，并附加一个执行您需要的回调函数。

Answer 8

Javascript的身体OnLoad事件可以满足您的需求。

<body onload="somefunc();">

Answer 9

我更喜欢这种解决方案：

 /**
  * 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");
});

当然，您可以添加更多不同的addEventListener，例如click，onChange等。

Answer 10

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

如何检测网页何时加载？

10 个答案: