Нажмите кнопку программно - JS

Я видел это в других веб-приложениях, но я довольно новичок в Javascript и не могу понять это самостоятельно. Я хочу, чтобы Google Hangouts был создан программно. Тем не менее, в официальном API единственный способ создать видеовстречу - это включить кнопку Hangouts на вашей странице.

Здесь находится документ Google в Hangouts.

Я хочу сделать, чтобы пользователь нажал кнопку img другого пользователя и таким образом открыл видеовстречу. Кажется, я мог захватить этот клик, а затем 'click' кнопку Hangouts в фоновом режиме. Тем не менее, я не очень хорошо разбираюсь в Javascript, поэтому я не знаю, как добиться этого.

ИЗМЕНИТЬ

Я попробовал решение mohamedrais ниже, не повезло. Это как-то связано с классом кнопки?

Здесь код кнопки, взятый из документов Hangouts с добавленным id:

 <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
        <div class="g-hangout" id="hangout-giLkojRpuK"
                                data-render="createhangout">
        </div>

Здесь JS я добавил, с помощью id s:

     <script>
          window.onload = function() {

              var userImage = document.getElementById("img-giLkojRpuK");
              var hangoutButton = document.getElementById("hangout-giLkojRpuK");

              userImage.onclick = function() {

                console.log("in onclick");
                hangoutButton.click(); // this will trigger the click event
              };
          };
        </script>

Когда я нажимаю кнопку img, "в onclick" регистрируется, поэтому функция вызывается. Однако ничего не происходит - Hangouts не запускается.

Когда я нажимаю прямо на кнопку Hangouts, он запускает Hangouts. Тем не менее, я хочу, в конце концов, скрыть это и выполнить щелчок с изображения.

Здесь изображение кнопки Hangouts выше img:

Ответ 1

window.onload = function() {
    var userImage = document.getElementById('imageOtherUser');
    var hangoutButton = document.getElementById("hangoutButtonId");
    userImage.onclick = function() {
       hangoutButton.click(); // this will trigger the click event
    };
};

это сделает трюк

Ответ 2

Хотя этот вопрос довольно старый, вот ответ:)

То, о чем вы просите, может быть достигнуто с помощью jQuery . click() метод событий и . on() метод событий

Таким образом, это может быть код:

// Set the global variables
var userImage = $("#img-giLkojRpuK");
var hangoutButton = $("#hangout-giLkojRpuK");

$(document).ready(function() {
    // When the document is ready/loaded, execute function

    // Hide hangoutButton
    hangoutButton.hide();

    // Assign "click"-event-method to userImage
    userImage.on("click", function() {
        console.log("in onclick");
        hangoutButton.click();
    });
});

Ответ 3

Я никогда не развивался с HangOut. Я столкнулся с теми же проблемами с FB-login, и я так старался заставить его щелкнуть программно. Затем я обнаружил, что sdk не позволит вам программно нажать кнопку из-за некоторых соображений безопасности. Пользователь должен физически щелкнуть по кнопке. Это также происходит с кнопкой async asp fileupload. Поэтому, пожалуйста, проверьте, разрешает ли HangOut программный щелчок по кнопке. Все вышеперечисленные коды верны, и они должны работать. Если вы копаете достаточно глубоко, вы увидите, что мой ответ - правильный ответ для вашей ситуации.

Ответ 4

Вы понимаете, что такое обработчик событий? Это функция. Вы понимаете, что делает браузер, когда он вызывает эту функцию? Он отправляет единственный объект "Событие" в качестве единственного аргумента. Вы понимаете, что такое объект события? Различные браузеры могут незначительно отличаться, но по существу они просто объект, чья "цель" является ссылкой DOM на какой-то элемент, который какой-то пользователь сделал что-то.

Если цель состоит в том, чтобы сделать что-то программно, тогда обычно вам будет только интересно, что произошло ЧТО-ТО, а не детали ЧТО, и вы уже знаете, где это произошло, и КАК МНОГИЕ. Таким образом, вы можете полностью игнорировать событие и попробовать вручную вызвать обработчик событий: handleFoo( );.

Если вам действительно нужно свойство target, просто возьмите ссылку DOM с помощью document.getElementById( 'someId' ) и передайте это? Так что-то вроде:

var elem = document.getElementById( 'foo' );
handleFoo( { target: elem } );

Хорошо, возможно, API строго соблюдает и проверяет цепочку instanceof или прототипа. Но даже тогда, даже если у вас нет конструктора new MouseEvent( 'click' );, почему бы просто не написать его? В нем вы вручную играете со всеми предметами создания объектов, используя Object.create? То есть установите __prototype__ в MouseEventPrototype и убедитесь, что вы глубоко копируете столько свойств из целевого браузера (ов), сколько необходимо для проверки любого API? Я сомневаюсь, что API выполняет некоторую тщательную проверку, чтобы гарантировать достоверность, или действительно, если API может даже обнаружить такую вещь.

Если браузер сам предотвращает создание похожих объектов, возможно, перехватит и сохранит ссылку на какой-либо другой подобный объект события, измените, какие свойства вам нужны, если таковые имеются, и передайте это вместе? Браузер может также предотвратить это с помощью свойств только для чтения?

Если какая-то библиотека, подобная jQuery, может это сделать, то они доказали, что это возможно. jQuery - это не какая-то повышенная магия. Это просто JavaScript, который кто-то набрал, так же, как вы печатаете самостоятельно. Просто просмотрите их код и определите технику, которую они используют, и сделайте что-нибудь подобное?

Если мы все закончим здесь и ничего не работаем, тогда хорошо, тогда я застрял, и браузер заблокировал безопасность в разумной степени.;)