我想从外部JavaScript文件中点击HTML文件

我有我的HTML网页和一个移动应用程序。

在移动应用程序中,我有三个按钮,分别是“开始”,“暂停”和“停止”,我的网站上也有这三个按钮(在我的网站上,这三个按钮已经具有动作)。

我想要做的是,如果我单击手机上的按钮,它将单击网页上相同的指定按钮。

Mi的最初计划是,从我的移动应用程序中,我通过邮寄发送到网站文件中的php文件中。然后从该php文件中向JavaScript文件发送一个简单的变量,该JavaScript文件将读取该变量是什么变量,并根据该变量执行我网页中相应按钮的点击。

我在网站上使用的脚本位于HTML代码中。

网站:

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/test"></script>
        <title> Spelling Bee </title>
    </head>
    <body>
        <header>
            <h1> Spelling Bee </h1>
        </header>

        <section>
            <div id="textbox">
                <h2> "Word" </h2>
            </div>

            <div>
                <p> Choose the difficulty: </p>
                <select id="difficulty">
                    <option value="0"></option>
                    <option value = "1"> Easy </option>
                    <option value = "2"> Medium </option>
                    <option value = "3"> Hard </option>   
                </select>

                <div id="timer"></div>

                <button id="start"> Start! </button>
                <button id="next"> Next </button>
                <button id="stop"> Stop </button>

                <script>

                    //1000 = 1 sec
                    var start= document.getElementById("start");
                    var difficulty = document.getElementById("difficulty")
                    var next = document.getElementById("next");
                    var stop = document.getElementById("stop");
                    var timer;

                    document.getElementById("timer").innerHTML = "-";
                    document.getElementById("start").disabled = true;
                    document.getElementById("next").disabled = true;
                    document.getElementById("stop").disabled = true;

                    start.addEventListener("click",functionStart);
                    var seconds,stop,counterStarted = false,counter;
                    var select_difficulty= document.getElementById('difficulty');

                    select_difficulty.onchange = function select_stop_time() {
                        var selectedValue = select_difficulty.options[select_difficulty.selectedIndex].value;

                        if (selectedValue == 1 ) {
                        document.getElementById("start").disabled = false;
                        stop = 10;//10
                        }
                        else if (selectedValue == 2 ) {
                        document.getElementById("start").disabled = false;
                        stop = 15;//15
                        }
                        else if (selectedValue == 3 ){
                        document.getElementById("start").disabled = false;
                        stop = 20;//20
                        }
                        else {
                        document.getElementById("start").disabled = true;
                        document.getElementById("next").disabled = true;
                        document.getElementById("stop").disabled = true;
                        stop = 0;//0
                        }
                    }

                    function functionStart() {
                        seconds = 1;
                        document.getElementById('difficulty').disabled = true;
                        document.getElementById("start").disabled = true;
                        document.getElementById("next").disabled = false;
                        document.getElementById("stop").disabled = false;

                        if(counterStarted === false){
                            counterStarted = true;
                            counter = setInterval(function(){
                                if(seconds <= stop){
                                    document.getElementById("timer").innerHTML = seconds;
                                    seconds++;
                                }
                                else{
                                    seconds = 1;
                                }
                            },1000)
                        }
                    }

                    stop.addEventListener("click",functionStop);
                    function functionStop(){
                        document.getElementById("timer").setattribute("disabled","disabled");
                        clearInterval(counter);
                        counterStarted = false;
                        document.getElementById('difficulty').disabled = false;
                        document.getElementById("timer").innerHTML = "-";
                        document.getElementById("start").disabled = false;
                        document.getElementById("next").disabled = true;
                        document.getElementById("stop").disabled = true;
                        frame();
                    }

                    next.addEventListener("click",functionNext);
                    function functionNext(){
                        seconds = stop;
                    }
                </script>
            </div>
        </section>
        <footer>
        </footer>
    </body>
</html>

移动应用程序: -HTML

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
        <title> Spelling Bee </title>
        <!-- grupo CSS -->
        <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css"/>
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css"/>
        <link rel="stylesheet" href="css/theme_sb.min.css"/>
        <!--grupo JavaScript-->
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/jquery.mobile-1.4.5.min.js"></script>
        <script src="js/acciones.js"></script>
        <script src="phonegap.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="principal" style="background-image: url(imagenes/honeycomb.png); text-align:center;">

            <div data-role="header" data-position="fixed" data-tap-toggle="false">
                <h1> Spelling Bee </h1>
            </div>

            <div data-role="main" class="ui-content" style="width: 30%; margin-left: 32%; margin-top: 45%;">
                <div id="buttons">
                    <input type="button" class="ui-btn" id="button1" value="Start!">
                    <input type="button" class="ui-btn" id="button2" value="Next">
                    <input type="button" class="ui-btn" id="button3" value="Stop!">
                </div>
            </div>

            <div data-role="footer" align="center" data-theme="a" data-position="fixed">
                <h4> Spelling Bee </h4>
                <img src="imagenes/bee.png" width="60">
            </div>

        </div>
    </body>
</html>

-JavaScript

// JavaScript Document
$(document).ready(function(e) {
    $('#button1').on('click',function(){
        alert("1");
    });//1
    $('#button2').on('click',function(){
        alert("2");
    });//2
    $('#button3').on('click',function(){
        alert("3");
    });//3
}); //ready

我放了警报进行测试。

cbslhw628 回答:我想从外部JavaScript文件中点击HTML文件

假设您希望网站上的操作与移动应用程序上的操作相同,则只需发送上述POST请求,然后在内部触发Javascript事件,而不必模拟实际在网站上的鼠标单击。

如果您想对网站上的元素触发某种视觉效果,还可以使用Javascript向元素添加样式/类。

要回答您最初以编程方式单击HTML元素的问题,只需执行以下操作:

document.getElementById('elementID').click();

,几乎所有浏览器都支持。 (摘自this thread

您需要通过PHP发送的唯一变量是'elementID',在您的JS文件中,该元素将用作您要单击的元素的ID。

本文链接:https://www.f2er.com/3169567.html

大家都在问