Question

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

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

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

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

Answer 1

了解这里发生了什么的最简单方法是在位置栏中键入javascript:"Hello world"并按Enter键。请注意，即使您未触及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私有化的额外好处。或者您可以像@diegog建议的那样将return false;添加到书签中。

^{1。不是undefined，在Javascript中，相等运算符也会返回值，很大程度上是错误输入==的人的烦恼。}

在浏览器控制台和bookmarklet中运行JavaScript

1 个答案: