阅读网页时，我需要页面内编辑器来做笔记，所以我写了一些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);
它可以在小书签中使用。看起来如果我重写主体的innerHTML，则不应用样式表。但这仍然让我感到困惑，为什么第一个代码段可以在Chrome控制台中使用。
编辑：我不知道为什么，但是在我把它附加到书架上之后，它就可以了。
void(0);
之所以有效，是因为javascript:URL将使浏览器呈现表达式的结果。第一个脚本的结果就是没有任何CSS的纯HTML（它也没有遵循任何外部链接）。
您可以通过javascript:x = 'hello'在地址栏中执行来测试它。
当您的脚本返回undefined（void（0）会这样做）时，行为会有所不同。在这种情况下，浏览器将不会重定向到新的内容，所以都javascript:x = 'hello';void(0);和javascript:x = 'hello';return undefined;什么也不做。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句