Question

我已经在其他网络应用程序中看到过这种情况，但我对Javascript还不熟悉，并且无法自己解决这个问题。我想以编程方式创建Google Hangout。但是，在官方API中，您可以通过在页面上添加环聊按钮来设置环聊。

Here's the Google doc on the Hangouts button.

我想要做的是让用户点击其他用户的img并以这种方式打开环聊。似乎我可以捕获该点击，然后在后台“点击”环聊按钮。但是，我对Javascript不太了解，所以我不知道如何实现这个目标。

修改

我在下面尝试了mohamedrais的解决方案但没有运气。是否与按钮的类有关？

以下是该按钮的代码，取自环聊文档并添加了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”会被记录，因此该函数被调用。但是，没有任何反应 - 环聊未启动。

当我直接点击环聊按钮时，它会启动环聊。但是，我想最终隐藏它并从图像中执行单击。

以下是img上面的环聊按钮的图片：

enter image description here

Answer 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
    };
};

这将解决问题

Answer 2

虽然这个问题相当陈旧，但这里有一个答案：）

使用jQuery .click() event method可以实现您的要求和.on() event method

所以这可能是代码：

// 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();
    });
});

Answer 3

我从未使用HangOut开发。我遇到了与FB-login相同的问题，我正在努力让它以编程方式单击。后来我发现由于某些安全原因，sdk将不允许您以编程方式单击按钮。用户必须以物理方式单击该按钮。这也发生在async asp fileupload按钮上。因此，请检查HangOut是否允许您以编程方式单击按钮。以上所有代码都是正确的，它们应该可行。如果你深入挖掘，你会发现我的答案对你的情况是正确的答案。

Answer 4

此处的其他答案取决于用户进行初步单击（在图像上）。这对于OP详细信息的细节很好，但不一定是问题标题。

有一个答案here解释了如何通过触发按钮（或任何元素）上的click事件来做到这一点。

Answer 5

使用JavaScript访问HTML元素时，当访问元素的代码运行时，很有可能该元素不在页面上，因此就JavaScript而言不在DOM中。

即使您可以在浏览器窗口中直观地看到HTML元素或将代码设置为在onload方法中调用，也会发生此问题。

在编写代码以检索Cookie后在页面上重新填充特定div元素后，我遇到了这个问题。

显然发生的是，即使HTML已加载并由浏览器输出，但JavaScript代码仍在页面完成加载之前运行。

解决此问题（可能只是JavaScript错误）的方法是将要运行的代码放在计时器中，该计时器将代码运行延迟400毫秒左右。您将需要对其进行测试以确定运行代码的速度。

在尝试为元素分配值之前，我还指出要对其进行测试。

at angular.js:38 at n (angular.js:11791) at Function.n.<computed> [as get] (angular.js:12061) at getRemoteResults (angucomplete-alt.js:483) at searchTimerComplete (angucomplete-alt.js:572) at angucomplete-alt.js:287 at angular.js:19916 at f (angular.js:6111) at angular.js:6390 window.setTimeout(function() { if( document.getElementById("book") )

这可能会或可能不会帮助您解决问题，但是请记住这一点并了解浏览器并不总是能够按预期运行。

以编程方式单击按钮 - JS

5 个答案: