Question

我正在尝试将此代码添加到Chrome扩展程序中，以便在聊天框可用时提醒我。它在一个带有类名shoutbox的div中，截至目前它不起作用。

function Detection(){
    if(document.getElementsByClassName("shoutbox")!=null){
      alert('Chat is available.')
    }
}

Detection();

更新的代码：页面加载，警告对话框永远不会出现。

function Detection(){
    if(document.getElementsByClassName("shoutbox").length > 0){
        alert('Chat is available.')
    }
}

window.onload = Detection;

Answer 1

== null将无法检测到空数组（无结果）。你可以写

if(document.getElementsByClassName("shoutbox").length > 0){
  alert('Chat is available.')
}

Answer 2

document.getElementsByClassName("shoutbox")返回一个元素数组，如果没有找到任何内容，则返回一个空白数组。要查看元素是否存在，请检查数组的长度。

if(document.getElementsByClassName("shoutbox").length > 0){

Answer 3

如果聊天框从一开始就不在页面上并且稍后添加（很容易检查 - 只需查看页面源代码），您可以监视DOMSubtreeModified事件，无论何时对其进行任何修改都会触发页面DOM：

document.addEventListener('DOMSubtreeModified', function(e) {
    if(document.getElementsByClassName("shoutbox").length > 0){
        alert('Chat is available.')
    }
});

逐个获取chrome的元素

3 个答案: