在网页加载之前显示空白网页

Question

我试图使用tampermonkey为其中一个网站创建主题，所以基本上我想从页面中删除所有内容，然后将自定义HTML添加到页面中。但是在主题出现之前，实际的网页显示了几秒钟。在我的自定义脚本添加一些自定义HTML之前，网站将完全空白。

我在tampermonkey中添加了以下代码

// @run-at        document-start

并且我添加了以下代码以首先清空网页

document.body.innerHTML = '';
//my remaining custom codes to add few tables and stuffs

所以我得到了这个错误

VM82 userscript.html：2错误：脚本“无显示”的执行失败！ 无法将属性“ innerHTML”设置为null

为了解决这个问题，我添加了100毫秒的settimeout，然后

setTimeout(function(){
document.body.innerHTML = '';
}, 50);

但是仍然显示第二个实际网页。

Answer 1

当脚本在document-start运行时，无法保证主体存在。 通常，情况恰好相反：文档完全为空，仅定义document.documentElement，它是<html>标记的DOM元素。

只需停止当前的加载进度，然后使用document.open + document.write：

// ==UserScript==
// @name          blank out
// @match         *://*/*
// @run-at        document-start
// ==/UserScript==

stop();

document.open('text/html', 'replace');
document.write(`
<html>
  <body>foo</body>
</html>
`);

请注意，如果站点的CSP限制特别严格，则可能无法正常工作。 在这种情况下，您将必须使用可以放松CSP的扩展（或者您可以自己编写这样的扩展）。

在网页加载之前显示空白网页

问题描述

1 个解决方案

解决方案1
1 2019-02-15 12:39:18

在网页加载之前显示空白网页

问题描述

1 个解决方案

解决方案1 1 2019-02-15 12:39:18

解决方案1
1 2019-02-15 12:39:18