这是预期的行为

Question

我有最新的Chrome，我想使用书签更新textarea字段，如下所示：

javascript:document.getElementById("<here comes the ID>").value="test";

Chrome始终使用值＆＃34; test＆＃34;更新元素body （来自上面的示例）而不是textarea

您可以通过转到http://reference.sitepoint.com/html/textarea/demoframe并使用所提及页面的textarea的ID或通过下面的堆栈代码执行书签来测试：

＆＃13;

ul, li{
  margin: 0;
  padding: 0;
}
textarea {
  margin-top: 10px;
  width: 100%;
}

＆＃13;

<ul>
  <li><strong>Without the void operator:</strong> <a href="javascript:document.getElementById('testTextarea').value='test 1';">This link will replace the contents of the page with "test 1"</a></li>
</ul>
<textarea id="testTextarea">Content to be replaced</textarea>

＆＃13;

所以我的问题是：为什么Chrome会更新HTML元素body？

编辑Mar 1 2:11 AM UCT：
以下代码在Chrome中运行良好：

javascript:document.getElementById("<here comes the ID>").value="test"; true;

因此，添加true作为最后一个命令可以解决问题。但为什么？看来只有bookmarklet就是这样的。

Answer 1

这是预期的行为

如果运行了bookmarklet且其返回值为而不是 undefined，则浏览器使用返回值替换页面内容是标准行为。在您的示例中，这是“测试”。

当浏览器跟随javascript：URI时，它会评估URI中的代码，然后用返回的值替换页面内容，除非返回的值未定义。

JavaScript URI（Mozilla Developer Network - void operator）

为什么你的第二个版本有效？

这似乎是Chrome中的一个错误（Issue 407505），IE和Firefox中的相同代码导致了预期的行为（即与第一个版本相同的结果）。

你能做什么？

使用void运算符。这将确保undefined 而是返回
将第二种方法更改为undefined而不是true

ul, li{
  margin: 0;
  padding: 0;
}
textarea {
  margin-top: 10px;
  width: 100%;
}

<ul>
  <li><strong>With the void operator:</strong> <a href="javascript:void(document.getElementById('testTextarea').value='test 1');">This link will replace the contents of the textarea with "test 1"</a></li>
  <li><strong>Returning undefined:</strong> <a href="javascript:document.getElementById('testTextarea').value='test 2';undefined;">This link will replace the contents of the textarea with "test 2"</a></li>
</ul>
<textarea id="testTextarea">Content to be replaced</textarea>

为什么Chrome在使用书签时更新正文而不是textarea值？

1 个答案:

这是预期的行为

为什么你的第二个版本有效？

你能做什么？