Question

我正在尝试向页面添加一个字符计数器，在这个页面上我输入三个值，它在div的innerHTML中返回一个大字符串，ID为'AnswerBoxID'，现在我希望我的脚本显然我已经写了

来计算其中的字符数

var submit=document.getElementsByClassName('Row3');
function countChars(){
    count = document.getElementById('AnswerBoxID').innerHTML.length;
    document.title ="Chars "+count+"/160";
}

返回字符的ROUGH近似值，然后当我将其粘贴到编辑器或其他计算字符的其他内容时，我会再次得到不同的结果，使用此方法计算得到其他内容报告的5个字符（特别是记事本++））。

但我最大的问题是我无法让countChars（）更新当document.getElementById('AnswerBoxID').innerHTML的值更新时，在javascript中我使用以下代码克服了该错误

var submit=document.getElementsByClassName('Row3');
for (i=0; i<submit.length; i++){
    submit[i].firstChild.setAttribute('onclick','countChars()');
}

阅读GM Pitfalls 2之后，我将我的方法修改为以下

for (i=0; i<submit.length; i++){
    submit[i].firstChild.addEventListener('click',countChars(),true);
}

但它仍然无效！在任何人问之前，我确实在函数之前定义了count变量。我真的不介意大多数准确长度的东西我更喜欢它更精确但我真的想添加onclick元素运行countChars（）到提交按钮。

Answer 1

您似乎错误地添加了事件处理程序。

elm.setAttribute('onclick','countChars()');

将在单击元素时在全局范围内设置属性和eval 'countChars()'。然而，Greasemonkey脚本运行sandboxed to their own global object，并且您声明的函数“countChars”不可用于eval。

elm.addEventListener('click',countChars(),true);

立即执行该函数并将返回值作为处理程序添加。要使其工作，只需删除括号并传递函数本身。另请参阅element.addEventListener

Answer 2

在GreaseMonkey中，您应该可以使用：

var count = document.getElementById('AnswerBoxID').textContent.length;

Answer 3

Greasemonkey脚本运行沙盒。这意味着，脚本在页面的onload事件中运行，然后被删除。在提交表单时调用Greasemonkey脚本的countChars()函数将返回undefined错误，因为DOM中不再存在您的函数对象。

这是我的简化contentEval函数（基于GM wiki的Content Script Injection函数）：

function contentEval(source) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.textContent = source;
    document.head.appendChild(script);
}

您还可以设置text属性而不是textContent以便与旧版IE兼容，感谢RogG！

将该功能放入GM脚本中，它将用于将以后需要的任何功能附加到DOM的头部。

将countChars函数作为参数传递给contentEval函数：

contentEval(function countChars() {
    var count = document.getElementById('AnswerBoxID').textContent.length;
    document.title ='Chars '+count+'/160';
});

这样，您的countChars函数将被放置在文档script附加的head元素内，该元素将在GM脚本的执行时间结束后访问。

如果您想查看上述代码的演示，请在this fiddle中使用DOM Inspector。它创建了一个新的script元素，该元素附加到（在JSfiddle的情况下，iframe）文档的head，这意味着只要您需要它就可以访问它。

您也可以简单地将该功能附加到unsafeWindow，但除非绝对必要，否则您应该避免使用unsafeWindow，并注意Google Chrome不支持unsafeWindow。

使用此页面作为参考：http://wiki.greasespot.net/Content_Script_Injection

同样使用.textContent方法获取RobG所指出的元素（及其后代）的文本内容。

将命令从Javascript转换为Greasemonkey

3 个答案: