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控制台中运行。

编辑：我不知道为什么，但在我将其附加到bookmartlet之后，它就可以了。

void(0);

Answer 1

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

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

当您的脚本返回 undefined 时，行为会有所不同，而void（0）会执行此操作。在这种情况下，浏览器无法重定向到新内容，因此javascript:x = 'hello';void(0);和javascript:x = 'hello';return undefined;都不会执行任何操作。

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

1 个答案: