document.getElementById().click();不能在手机上工作答案

【问题标题】：document.getElementById().click(); dont works on mobiledocument.getElementById().click();不能在手机上工作
【发布时间】：2021-06-21 21:26:41
【问题描述】：

我正在尝试运行它，在桌面上运行良好，但在移动设备上无法运行

<div style="margin-top: 30px">
   <p style="text-align: center; color: white; margin-bottom: 10px">Experimente o Wi-Fi gratuitamente! Curta e compartilhe nossa página!</p>
   <a id="freebot" class="button" onclick="sharePost();" href="#">Entre com o Facebook</a>
   <a id="loginfree" href="$(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc)"></a>
</div>

这是我要执行的功能

function authHotspotMikrotik() {
    document.getElementById("loginfree").click();
}

有人可以帮我吗？

【问题讨论】：

这个 JavaScript 可以在任何浏览器上运行。到底出了什么问题？不清楚。
@ADyson，在桌面上，该功能通过打开链接（href）即可完美运行，但在移动设备上无法运行

标签： javascript php html function mobile

【解决方案1】：

如果您尝试模拟鼠标点击，则需要创建鼠标事件并调度它。

let simulateClick = function(elem) {
  // Create our event (with options)
  let evt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  // If cancelled, don't dispatch our event
  let canceled = !elem.dispatchEvent(evt);
};


simulateClick(document.getElementById("loginfree"))

<div style="margin-top: 30px">
  <p style="text-align: center; color: white; margin-bottom: 10px">Experimente o Wi-Fi gratuitamente! Curta e compartilhe nossa página!</p>
  <a id="freebot" class="button" onclick="sharePost();" href="#">Entre com o Facebook</a>
  <a id="loginfree" href='https://google.com'>click element</a>
</div>

【讨论】：

感谢您的帮助，但它仍然无法在移动设备上运行，但在台式机上却可以完美运行。难道我没有办法直接在 javascript 中调用这个“href id=loginfree”而不需要模拟点击或在 html 中创建元素吗？
您的网址看起来很奇怪。你能告诉我这是怎么解决的吗？ $(link-login-only)?dst=$(link-orig-esc)&amp;username=T-$(mac-esc) 如何将其解释为实际 URL？
为了简化一点，我可以使用这个链接：example.com/login?username=T-$(mac-esc)，变量 $(mac-esc) 将被正在登录的设备的 mac 替换并发送到mikrotik 路由器
我不知道这是否与桌面打开一个弹出窗口和移动设备打开一个新标签的事实有关，对不起，如果我说废话是因为我现在开始了
你知道，我不确定问题是什么。是不是打不开弹窗？或者不能以编程方式触发点击？还是...？

【解决方案2】：

我对这些代码进行了修改：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="expires" content="-1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amazon Inter.Net Wi-Fi - Login</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- two other colors

<body class="lite">
<body class="dark">

-->

    $(if chap-id)
    <form name="sendin" action="$(link-login-only)" method="post" style="display:none">
        <input type="hidden" name="username" />
        <input type="hidden" name="password" />
        <input type="hidden" name="dst" value="$(link-orig)" />
        <input type="hidden" name="popup" value="true" />
    </form>

    <script src="/md5.js"></script>
    <script>
        function doLogin() {
            document.sendin.username.value = document.login.username.value;
            document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
            document.sendin.submit();
            return false;
        }

    </script>
    $(endif)


    <div class="ie-fixMinHeight">
        <div class="main">
            <div class="wrap animated fadeIn">
                <form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
                    <input type="hidden" name="dst" value="$(link-orig)" />
                    <input type="hidden" name="popup" value="true" />
                    <img class="logo" src="img/logo.svg" alt="#">


                    <p class="info $(if error)alert$(endif)">
                        $(if error == "")Digite seu e-mail e senha para utilizar o Wi-Fi da Amazon Inter.net$(endif)

                        $(if error)$(error)$(endif)
                    </p>
                    <label>
                        <img class="ico" src="img/user.svg" alt="#" />
                        <input name="username" type="text" value="$(username)" placeholder="E-mail" />
                    </label>

                    <label>
                        <img class="ico" src="img/password.svg" alt="#" />
                        <input name="password" type="password" placeholder="Senha" />
                    </label>

                    <p style="margin-bottom: 10px">
                        <a style="color: white" href="#">Esqueci minha senha?</a>
                    </p>
                    <p>
                        <input type="submit" value="Conectar" />
                        <a id="cadbot" class="button" href="#">Cadastre-se</a>
                    </p>

    $(if trial == 'yes')
        <script async defer src="js/sdk.js"></script>
        <script>
        var app_id = 'XXXXXXXXXXXXXXXX'           // id do app criado no facebook
            
        window.fbAsyncInit = function() {
            FB.init({
                appId            : app_id,
                autoLogAppEvents : true,
                xfbml            : true,
                version          : 'v3.3'
            });
        };

        function sharePost(){
            FB.ui(
                {
                    method: 'share',
                    href: 'https://www.facebook.com/amazoninter.net.br',
                },

                // callback
                function(response) {
                    if (response && !response.error_message) {
                        window.open('https://example.com/login?username=T-$(mac-esc)', '_self');
                    } else {
                        alert('Erro durante a postagem.');
                    }
                }
                );
            }
        </script>
        <div style="margin-top: 30px">
            <p style="text-align: center; color: white; margin-bottom: 10px">Experimente o Wi-Fi gratuitamente! Curta e compartilhe nossa página!</p>
            <a id="freebot" class="button" onclick="sharePost();" href="#">Entre com o Facebook</a>
        </div>
    $(endif)
</form>
<p class="info bt">Desenvolvido por Departamento de TI - Amazon Inter.Net</p>
</div>
</div>
</div>
</body>

</html>

如果你查看 sharePost();功能，我在facebook回调中打开链接，在桌面上它正常打开链接并将php变量“$（mac-esc）替换为共享帖子的设备的MAC地址并完成登录，但在移动设备上发布完成后的设备，它显然没有打开链接，也没有用智能手机的 MAC 替换变量“$(mac-esc)”，它只是关闭智能手机打开的 TAB 并返回登录屏幕.然后我的问题来了，桌面打开一个弹出窗口而移动设备打开一个新标签的事实可能是问题的原因吗？

【讨论】：