为什么从书签执行js片段时所有样式都丢失了？

Question

我需要一个页内编辑器在阅读网页时做笔记，所以我写了一点javascript片段：

document.body.innerHTML+="<div style='position:fixed;\
top:10px;right:10px;width:300px;height:50%;background:#ccffcc;\
z-index:9999'><p contenteditable='true' style='font-size:150%;\
width:100%;height:100%'></p></div>";

在我正在阅读的页面上添加一个浮动编辑器。

当我在 Chrome 的控制台中执行此操作时，一切正常。但是当我添加书签：javascript:[the-above-js-code]，并从书签栏中单击它时，所有 css 都从页面中消失了。

这是怎么回事？我该怎么做才能避免这种情况？

编辑：当我将片段更改为：

var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.innerHTML="<div style='position:fixed;top:10px;right:10px;width:300px;height:50%;background:#ccffcc;z-index:999'><p contenteditable='true' style='font-size:150%; width:100%;height:100%'></p></div>";
frag.appendChild(myDiv);
document.body.appendChild(frag);

它在小书签中有效。看起来如果我重写 body 的 innerHTML，样式表就不会应用。但它仍然让我感到困惑，为什么第一个片段在 Chrome 控制台中工作。

编辑：我不知道为什么，但是在我将其附加到小书店之后，它起作用了。

void(0);

Answer 1

之所以有效，是因为 javascript: URL 将使浏览器呈现表达式的结果。您的第一个脚本的结果只是简单的 HTML，没有任何 CSS（它也没有跟随任何外部链接）。

您可以通过在地址栏中执行 javascript:x = 'hello' 来测试它。

当您的脚本 returns undefined which void(0) 执行时，行为是不同的。在这种情况下，浏览器不会重定向到新内容，因此 javascript:x = 'hello';void(0); 和 javascript:x = 'hello';return undefined; 什么都不做。

为什么从书签执行js片段时所有样式都丢失了？

Why are all styles lost when the js snippet is executed from a bookmark?

html

javascript

css

bookmarklet