Javascript在停止窗口加载后显示一些内容

Javascript show some content after stopping window load

本文关键字：显示 加载 窗口 Javascript      更新时间：2023-09-26

我正在编写一个 chrome 扩展程序，用于停止特定网站的页面加载。我这样做的方式是将我的内容脚本注入页面并调用 

window.stop()

这按预期工作，我看到一个空白的白色网页。我现在想在这个空白的白页上显示一条自定义消息，我该怎么做。

这是我到目前为止尝试过的，在调用 window.stop（） 之后，我有这样一行：

document.body.innerHTML += '<div style="position:absolute;width:100%;height:100%; z-index:100;background:#000;"></div>';

但它抛出了一个错误

 Uncaught TypeError: Cannot read property 'innerHTML' of null

我检查了 DOM，它确实有正文标签。我不确定出了什么问题。

我假设您通过在document_start处注入内容脚本并决定是否阻止来阻止站点。

更好的方法是完全取消初始请求，并将其重定向到您自己的错误页面。

webRequest API 可以做到这一点：

 chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
      if(/* condition based on details */) {
        // The file might need to be in web_accessible_resources
        return {redirectUrl: chrome.runtime.getURL("my_error.html")};
      }
    },
    {urls: ["<all_urls>"], types: ["main_frame"]},
    ["blocking"]
 );

注意：这将在每个导航请求上调用您的测试代码;这可能会减慢速度。如果您有特定的站点列表，则可以将它们放在过滤器的urls参数中以获得更好的性能。

您将需要主机权限，涵盖要阻止的站点（或"<all_urls>"，如果您可能需要所有站点），"webRequest"和"webRequestBlocking"。

您可以随时使用 window.document.write（）。

您的代码将看起来像...

document.write("<div style='position:absolute;width:100%;height:100%; z-index:100;background:#000;'></div>")
相关文章：