Chrome 地址栏 Javascript 产生与控制台不同的效果

Question

尝试一些新的东西，我试图在地址栏中使用 javascript 突出显示 this wikia page 上的文本（即使用 "javascript:[code]"）。

当运行以下代码示例通过Chrome的控制台时，它会产生预期的效果。当运行来自地址栏时，它只会导致受影响的文本 -- 页面正文的其余部分将被删除。

javascript:txt = document.getElementById("Ballas.27_Rebellion_and_Allying_With_Hunhow").parentElement.nextElementSibling;index = txt.innerHTML.indexOf(", but")+2;txt.innerHTML = txt.innerHTML.substring(0,index)+"<span style='background-color:yellow;'>"+txt.innerHTML.substring(index,index+40)+"</span>"+txt.innerHTML.substring(index+40);

注意：如果您想尝试此操作，您必须在粘贴代码之前在地址栏中手动输入 javascript:，因为 Chrome 会自动将其删除。

我很好奇为什么会这样，以及是否有办法阻止地址栏删除页面主体的其余部分。谁能提供见解？

谢谢。

Answer 1

解决您遇到的问题的快速方法是在查询末尾添加 false;。这将防止 Chrome 从您的页面中删除文本，并且应该会为您提供预期的结果。

固定代码如下：

javascript:txt = document.getElementById("Ballas.27_Rebellion_and_Allying_With_Hunhow").parentElement.nextElementSibling;index = txt.innerHTML.indexOf(", but")+2;txt.innerHTML = txt.innerHTML.substring(0,index)+"<span style='background-color:yellow;'>"+txt.innerHTML.substring(index,index+40)+"</span>"+txt.innerHTML.substring(index+40);false;

为了完整回答这个问题，让我快速解释一下发生了什么。我将首先拆分您的 JS 以使其更易于阅读。

txt = document.getElementById("Ballas.27_Rebellion_and_Allying_With_Hunhow").parentElement.nextElementSibling;

index = txt.innerHTML.indexOf(", but")+2;

txt.innerHTML = txt.innerHTML.substring(0,index) +
  "<span style='background-color:yellow;'>" +
  txt.innerHTML.substring(index,index+40) +
  "</span>"+txt.innerHTML.substring(index+40);

您会注意到最后的语句是一个赋值操作。在 JavaScript 中，赋值操作的结果是赋值的值。换句话说，如果我们说 return x = 1，我们会将 x 的值设置为 1，将 return 的值设置为 1.

这让我们明白了 Chrome 替换您的页面内容的原因。您提供的 JavaScript 是 returning txt 元素的内容（您决定突出显示的段落），然后将其视为新页面的内容，与在浏览器中访问 data:text/plain,hello world 或 javascript:"hello world" 一样，即使您没有明确访问网站，也会显示文本 "hello world"。

要解决此问题，您可以 return JavaScript 中的 falsey 值 - 这意味着以下任何一项：

0
false
[]
null
undefined

因此，在 JavaScript 末尾添加 false; 将具有 Chrome 运行代码，但不会显示生成的文本并将阻止它更改页面内容出乎你的意料。

Chrome 地址栏 Javascript 产生与控制台不同的效果

Chrome Address Bar Javascript produces different effect than Console

javascript

html

google-chrome

address-bar