javascript - 在浏览器控制台与小书签中运行 JavaScript

Question

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

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

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

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

Answer 1

了解这里发生的情况的最简单方法是在地址栏中输入 javascript:"Hello world" 并按 Enter 键。请注意，即使您没有触及 DOM，页面内容也会被替换。

这是因为小书签的返回值被传递给页面内容(如果存在)。在本例中，(document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar")) 计算结果为新的 innerHTML< sup>1。这只是文档正文的innerHTML，因此当替换整个文档HTML时，STLe信息会丢失。

这样做要好得多:

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

它还有一个额外的好处，就是可以将所有 var 设为私有(private)。或者您可以按照 @diegog 的建议将 return false; 添加到书签。

^{1。不是未定义，在Javascript中相等运算符也返回值，这让那些错误输入==的人很烦恼。}