Question

我正在尝试编写一个简单的用户脚本，它与twitter中的textarea有关。

在Chrome中使用调试控制台时，“document.getElementsByTagName（'textarea'）”会返回一个包含文本框的数组（您在其中键入推文），但在我的用户脚本中它只返回一个空数组。我在这里做的事情有些非常基本和错误吗？无论有没有“@ run-at document-end”，我都尝试过这种方法，但是我不能在textarea上找到它。

感谢阅读！

// ==UserScript==
// @name twitter-edit
// @namespace foo
// @description twitter
// @match http://www.twitter.com/*
// @match https://www.twitter.com/*
// @match https://twitter.com/*
// @match http://twitter.com/*
// @run-at document-end
// ==/UserScript==

(function() {
    var textareas = document.getElementsByTagName('textarea');
    window.alert('textareas len ' + textareas.length); // <-- **THIS SOMEHOW RETURNS 0**
    if (textareas.length != 1) {
        window.alert('error');  
    } else {
        var tweetbox = textareas[0];
            window.alert('tweetbox: ' + tweetbox);
    }
}());

Answer 1

脚本执行时，您确定textarea已存在吗？

我可以在twitter上找到DOM中的textarea，但不能在页面静态html代码中找到它，所以它可能在页面收费后加载。你的脚本应该在textarea出现后加载。

Answer 2

由于该网站充斥着ajax，并且因为它潜入至少1个iFrame，因此您必须等待一段时间才能看到该文本框。

此外，在Twitter上关注链接时，页面通常只是通过AJAX方法更改。在这种情况下，普通脚本不会触发。

为了弥补，只需设置一个持续检查该Twitter框的计时器，并抓住新的框，因为该页面由ajax“重新加载”。

此脚本有效：

// ==UserScript==
// @name twitter-edit
// @namespace foo
// @description twitter
// @match http://www.twitter.com/*
// @match https://www.twitter.com/*
// @match https://twitter.com/*
// @match http://twitter.com/*
// @run-at document-end
// ==/UserScript==

//--- This handles both page-load delays, and AJAX changes.
setInterval (function() { checkForTweetbox (); }, 500);

function checkForTweetbox () {
    var tweetbox = document.querySelector ('div.tweet-box textarea');
    if (tweetbox) {
        if (! tweetbox.weHaveProcessed) {
            tweetbox.weHaveProcessed    = true;
            alert ('New tweet-box found!');
        }
    }
}

非常基本的chrome userscript问题 - 在DOM中找不到元素

2 个答案: