通过控制台在Facebook页面上发表评论

问题描述

像图像一样，Facebook的评论框没有提交按钮，当你写东西并按Enter按钮时，发表评论。

我想提交通过在控制台中运行的JavaScript进行评论。但是我试图触发输入事件，提交DOM的事件。无法使其正常工作。

解决方案

当前评论框不是传统的< textarea> < form> 内。他们在div上使用contenteditable属性。为了在这种情况下提交，你想要听一个键盘事件（ keydown ， keypress ， keyup ），然后查找输入键，即键码13。

在这种情况下，FB似乎正在听 keydown evt，所以当我运行这段代码时，我可以假冒提交评论：

  function fireEvent（type，element）{
 var evt; 
 
 if（document.createEvent）{
 evt = document.createEvent（HTMLEvents）; 
 evt.initEvent（type，true，true）; 
} else {
 evt = document.createEventObject（）; 
 evt.eventType = type; 
} 
 
 evt.eventName = type; 
 evt.keyCode = 13; 
 evt.which = 13; 
 
 if（document.createEvent）{
 element.dispatchEvent（evt）; 
} else {
 element.fireEvent（on+ evt.eventType，evt）; 
} 
} 
 
 fireEvent（'keydown'，document.querySelector（'[role =combobox] ._ 54-z span span'））; 
  

需要注意的几件事情。课程 ._ 54-z 是他们刚刚在我的网页上使用的课程。你的旅费可能会改变。使用开发工具确保您抓住正确的元素（它应该具有aria角色组合框）。另外，如果您希望支持旧的浏览器，那么您将不得不调整上面的 fireEvent 功能代码。最近，我只是在最新的Chrome中测试了上面的例子。

最后，为了使事情变得复杂化，Facebook正在使用React，它创建当前页面的虚拟DOM表示。如果您手动将字符输入到组合框中，然后运行上面的代码，它将按预期工作。但是您将无法将组合框的最内层< span> 的innerHTML设置为您要执行的操作，然后触发 keydown 。您可能需要触发组合框中的更改事件，以确保您的消息仍然存在于虚拟DOM中。

Like in the image, the Facebook comment box has no submit button, when you write something and press Enter button, the comment posted.

I want to submit the comment via JavaScript that running in console. but I tried to trigger Enter event, submit event of the DOM. Could not make it work.

解决方案

The current comment boxes aren't a traditional <textarea> inside of a <form>. They're using the contenteditable attribute on a div. In order to submit in this scenario, you'd want to listen to one of the keyboard events (keydown, keypress, keyup) and look for the Enter key which is keycode 13.

Looks like FB is listening to the keydown evt in this case, so when I ran this code I was able to fake submit a comment:

function fireEvent(type, element) {
    var evt;

    if(document.createEvent) {
        evt = document.createEvent("HTMLEvents");
        evt.initEvent(type, true, true);
    } else {
        evt = document.createEventObject();
        evt.eventType = type;
    }

    evt.eventName = type;
    evt.keyCode = 13;
    evt.which = 13;

    if(document.createEvent) {
        element.dispatchEvent(evt);
    } else {
        element.fireEvent("on" + evt.eventType, evt);
    }
}

fireEvent('keydown', document.querySelector('[role="combobox"]._54-z span span'));

A couple of things to note about this. The class ._54-z was a class they just happened to use on my page. Your mileage may vary. Use dev tools to make sure you grab the right element (it should have the aria role "combobox"). Also, if you're looking to support older browsers, you're going to have to tweak the fireEvent function code above. I only tested the above example in the latest Chrome.

Finally, to complicate matters on your end, Facebook is using React which creates a virtual DOM representation of the current page. If you're manually typing in the characters into the combobox and then run the code above, it'll work as expected. But you will not be able to set the combobox's innermost <span>'s innerHTML to what you're looking to do and then trigger keydown. You'll likely need to trigger the change event on the combobox to ensure your message persists to the Virtual DOM.

That should get you started! Hope that helps!

这篇关于通过控制台在Facebook页面上发表评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！