javascript - 在浏览器控制台中运行 JavaScript 与 bookmarklet

Question

我尝试运行一个简单的代码来替换 JS 中 HTML 页面正文中的字符串。

document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar");

上面的代码在浏览器控制台中运行良好(在 Firefox 和 Chrome 中测试)，但是当我通过前缀为 javascript: 的 JavaScript 书签运行相同的代码时，页面中断，丢失所有它的样式元素。

我很好奇为什么代码表现不同，因为我认为在控制台或通过书签运行的 JS 代码会在相同的环境中运行。

Answer 1

了解这里发生的事情的最简单方法是输入 javascript:"Hello world"进入地址栏并点击回车。请注意，即使您没有接触 DOM，页面内容也会被替换。

那是因为小书签的返回值被交给了页面内容，如果它存在的话。在这种情况下，(document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar"))评估为新的 innerHTML ¹。这只是 innerHTML文档主体，因此当整个文档 HTML 被替换时，STLe 信息将丢失。

这样做更好:

javascript: ( function(){document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar") }()

它的额外好处是让您所有的 var是私有(private)的。或者你可以加上 return false;按照@diegog 的建议添加到小书签。

^{1。不是undefined ，在 Javascript 中，相等运算符也返回值，这让那些打错 == 的人很恼火.}