0

我正在尝试向页面添加字符计数器，在此页面上我输入了三个值，它在 ID 为“AnswerBoxID”的 div 的 innerHTML 中返回一个大字符串，现在我希望我的脚本明显地计算数字我已经写了其中的字符来做到这一点

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

它返回字符的粗略近似值，然后当我将其粘贴到编辑器或其他计算字符的东西中时，我再次得到不同的结果，使用此方法计数得到其他东西报告的内容（特别是记事本++）的 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 变量。我真的不介意最准确的长度，我希望它更精确，但我确实想将运行 countChars() 的 onclick 元素添加到提交按钮。

4

3 回答 3

2

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

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

'countChars()'将设置一个属性，并在单击元素时在全局范围内进行eval 。然而，Greasemonkey 脚本以沙盒方式运行到它们自己的全局对象，并且您声明的函数“countChars”对 eval 不可用。

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

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

于 2012-06-06T04:53:25.410 回答
1

在 GreaseMonkey 中，您应该能够使用：

var count = document.getElementById('AnswerBoxID').textContent.length;
于 2012-06-06T03:50:42.530 回答
1

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 脚本的执行时间结束后可以访问该元素。

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

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

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

.textContent如 RobG 所述，还可以使用该方法获取元素（及其后代）的文本内容。

于 2012-06-06T04:14:14.177 回答