javascript - 从书签运行时，Bookmarklet 不起作用，但从控制台运行时可以

Question

我正在尝试创建一个书签，它将在网页上的文本区域中插入一些文本(网页供内部使用，因此没有必要链接)。

这是我尝试过的 JavaScript 代码示例:

(function(){document.getElementById("textareaID").value="Some text";})();

我想指出，我尝试了不同的元素选择器(byClass、查询...)和不同的属性(甚至 tabindex)以获得相同的结果。还在 Chrome 和 IE11 中进行了尝试。

因此，出于某种奇怪的原因，当我从控制台(或作为片段)运行我的 JavaScript 时，它会运行，但当我尝试执行以下操作时，我收到错误“无法设置 null 的属性‘值’”从书签菜单运行它。

我尝试自己创建一个书签

javascript:(function(){document.getElementById("textareaID").value="Some text";})();

并尝试使用在线书签创建器对特殊字符进行编码

javascript:(function(){document.getElementById(%22textareaID%22).value=%22Some%20text%22;})();

但运气不好。

书签肯定可以在页面上使用(尝试使用警报“Hello”)，但我似乎在“捕获”元素时遇到问题。我还注意到某些元素的 ID 有时会发生变化(但不确定为什么)，但我总是检查以确保我尝试使用的 ID 存在，或者我使用一些固定值，如 tabindex。此外，正如我所说，它在从控制台运行时有效，所以我不可能以某种方式搞砸它......或者我可以吗？

Answer 1

所以问题出在执行上下文上。因为元素的 ID 正在改变，所以我必须在从控制台运行 js 之前检查它们，并检查将执行上下文从 top 更改为元素所在的位置。这就是为什么它从控制台而不是从书签工作......

因此，要写入特定框架内的文本框:

let Iframe =  document.getElementById('yourIframe').contentWindow.document
let value = Iframe.getElementById("textboxID").value = "Some Text"

之后唯一剩下的就是将所有内容包装在 javascript:(function(){..your code here..})(); 中以创建一个小书签。