Chome console .click()在一个网站上工作,但在另一个网站上没有。为什么以及如何?

时间:2017-08-15 19:33:09

标签: javascript jquery html google-chrome-console

当我打开Facebook的messenger.com并在控制台中运行document.getElementsByClassName('_1htf')[2].click();时,它会跳转到对话并打开它。 _1htf是我选择的随机类,每个会话条目都包含此类。

web.whatsapp.com上执行相同操作以访问对话,没有任何反应。我甚至不能click()"真实"这个网站上的按钮。

我真的不明白为什么这种方法适用于第一个,但不适用于第二个网站。

我可以指出网站之间存在2个不同之处:

  • web.whatsapp.com屏蔽了浏览器的鼠标右键上下文菜单,并使用自定义菜单替换它 - messenger.com不会这样做

  • messenger.com _1htf元素包含导致对话的URI(您可以在新标签页中打开uri,最后进入对话) - web.whatsapp.com的元素不包含链接,但在点击时仍以某种方式打开对话

这是如何实现的?是否有一些Javascript听鼠标事件? 如果是,我该如何触发事件?我真的需要"点击"以编程方式进行对话。

这是一个会话条目在web.whatsapp.com

中的显示方式
<div class="infinite-list-item infinite-list-item-transition" style="z-index: 200; height: 72px; transform: translateY(144px);">
    <div tabindex="-1" class="chat-drag-cover">
        <div class="active chat hover">
            <div class="chat-avatar">
                <div class="avatar icon-user-default">
                    <div class="avatar-body" style="cursor: pointer;"><img src="https://dyn.web.whatsapp.com/pp?t=s&amp;u=4 . . . " draggable="false" class="avatar-image is-loaded"></div>
                </div>
            </div>
            <div class="chat-body">
                <div class="chat-main">
                    <div class="chat-title"><span class="emojitext ellipsify" dir="auto" title="CONVERSATION PARTNER"><!-- react-text: 92 -->CONVERSATION PARTNER<!-- /react-text --></span></div>
                    <div class="chat-meta"><span class="timestamp">21:16</span></div>
                </div>
                <div class="chat-secondary">
                    <div class="chat-status"><span class="last-msg" title="CONVERSATION MESSAGE"><span class="emojitext" dir="ltr"><!-- react-text: 28843 -->CONVERSATION MESSAGE<!-- /react-text --></span></span>
                    </div>
                    <div class="chat-meta"><span></span><span></span><span class="context-container"><div data-icon="down" role="button" class="img btn-context" style="width: 20px; opacity: 1;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" width="21" height="21"><path fill-opacity=".31" d="M4.8 6.1l5.7 5.7 5.7-5.7 1.6 1.6-7.3 7.2-7.3-7.2 1.6-1.6z"></path></svg></div></span></div>
                </div>
            </div>
        </div>
    </div>
</div>

更新:我尝试触发Chrome开发者控制台中列出的众多活动&gt;元素&gt;事件监听器但不是这样的,它只能输出ƒ focus() { [native code] }但不会跳转到对话。

由于

1 个答案:

答案 0 :(得分:1)

Whatsapp可能阻止不受信任的点击。

要了解我正在谈论的内容,请先将其输入控制台:

document.onclick = (e) => { console.log(e.isTrusted) };

现在,尝试点击页面上的任意位置。它现在应该在控制台中显示true

如果您尝试这样做:

document.getElementsByTagName('a')[0].click();

然后isTrusted将是假的,因为它不是真正的点击。

据我所知,你不能欺骗价值,所以你必须找到一种不同的方式来做你想做的事情(尝试检查任何点击/ mousedown事件处理程序你的&# 39;重新点击,看看你是否可以直接调用某些功能。