Cliquez sur un bouton par programmation - JS

J'ai vu ce fait dans d'autres webapps, mais je suis assez nouveau dans le Javascript et ne peut pas vraiment comprendre cela sur mon propre. Je veux créer un Google Hangout par programmation. Cependant, dans la langue officielle de l'API, la seule façon vous pouvez créer un Hangout est en y le Repaire bouton sur votre page.

Voici le Google doc sur les Hangouts bouton.

Ce que je veux faire est d'avoir un utilisateur, cliquez sur une img d'un autre utilisateur et ouvrir le Repaire de cette façon. Il me semble que je pouvais saisir que de la souris, puis en cliquant sur la Hangouts bouton à l'arrière-plan. Cependant, je ne suis pas très bon en Javascript donc je ne sais pas comment faire pour atteindre ce.

MODIFIER

J'ai essayé mohamedrais solution ci-dessous avec pas de chance. Est-il quelque chose à faire avec la classe du bouton?

Voici le code pour le bouton, pris de la Hangouts docs avec un 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>

Voici le JS, j'ai ajouté, rendus avec ids:

     <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>

Quand je clique sur le img"onclick" est de se connecté, donc la fonction est appelé. Cependant, rien ne se passe - Hangouts n'est pas lancé.

Quand je fais cliquer directement sur les lieux de visites sur le bouton, il ne lancer des Hangouts. Cependant, je tiens finalement à le cacher et effectue le clic de l'image.

Voici une photo de l'Hangouts bouton au-dessus de la img:

Cliquez sur un bouton par programmation - JS

source d'informationauteur Ramsel | 2014-06-18

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

    cela fera l'affaire

  2. 3

    Si cette question est assez vieille, voici une réponse 🙂

    Ce que vous demandez peut être réalisé par l'utilisation de jQuery .cliquez sur la (les) méthode d'événements
    et .() la méthode événement

    Donc, cela pourrait être le code:

    //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. 0

    Je n'ai jamais développé avec HangOut. J'ai rencontré les mêmes problèmes avec FB-connexion et j'ai essayé tellement dur pour l'obtenir, cliquez en programmant. Puis plus tard j'ai découvert que le sdk ne vous permettra pas d'en programmant cliquez sur le bouton en raison de certaines raisons de sécurité. L'utilisateur doit effectuer un clic sur le bouton. Cela se produit également avec async asp fileupload bouton. Veuillez donc vérifier si HangOut ne vous permet pas d'en programmant cliquez sur un buttton. Tous les codes ci-dessus sont correctes et qu'ils devraient travailler.
    Si vous creusez assez profond, vous verrez que ma réponse est la réponse appropriée pour votre situation, vous.

  4. 0

    Comprenez-vous ce qu'est un gestionnaire d'événement est? C'est une fonction. Comprenez-vous ce que le navigateur n'lors de l'appel à cette fonction? Il envoie un "Événement" de l'objet que le seul argument. Comprenez-vous ce qu'est un objet d'événement est? Les différents navigateurs peuvent varier légèrement, mais en gros, ils sont tout simplement un objet dont la "cible" est un DOM ref sur un élément que l'utilisateur fait quelque chose pour.

    Si le but est de faire quelque chose par programme, ensuite, généralement, vous ne se soucient que quelque CHOSE s'est passé, pas les détails de CE que, et vous le savez déjà OÙ c'est arrivé et COMMENT BEAUCOUP de choses peuvent arriver. Ainsi, vous pouvez ignorer l'événement lui-même entièrement, et essayez d'appeler le gestionnaire d'événements manuellement: handleFoo( );.

    Si vous avez réellement besoin de la propriété cible, il suffit de saisir un DOM de référence avec document.getElementById( 'someId' )et le passer? Donc quelque chose comme:

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

    Ok, peut-être que l'API applique strictement et vérifie la instanceof ou la chaîne de prototype. Mais même alors, même si vous n'avez pas de new MouseEvent( 'click' ); constructeur, pourquoi ne pas en écrire un? En elle, vous pouvez manuellement modifier tous la création de l'objet des bidules à l'aide de l'Objet.créer? I. e. ensemble __prototype__ à MouseEventPrototype et assurez-vous de copie en profondeur autant de propriétés à partir du navigateur cible(s) qu'il est nécessaire de passer un examen minutieux de toutes les API? Je doute que l'API est en train de faire un peu de profondeur de vérifier la validité, ou si en fait l'API peut même détecter une telle chose.

    Si le navigateur est eux-mêmes empêcher sosie de création de l'objet, puis peut-être d'intercepter et d'enregistrer une référence à un autre événement similaire d'objet, de modifier les propriétés que vous avez besoin, le cas échéant, et le passer? Le navigateur peut empêcher que trop avec des propriétés en lecture seule?

    Si une bibliothèque comme jQuery est capable de faire cela, alors ils ont prouvé que c'est possible. jQuery n'est pas une élévation de la magie. C'est juste du JavaScript que quelqu'un a tapé dans l', de même que vous vous en tapant votre propre. Il suffit de regarder autour de leur code et de déterminer la technique qu'ils utilisent, et de faire quelque chose de similaire?

    Si nous avons tout le chemin ici-bas et rien ne marche, alors ok, alors je suis coincé, et le navigateur de l'avoir verrouillé la sécurité à un niveau raisonnable. 😉