Question

我有一个页面，其中按钮或提交表单将在未知时间出现。我不知道按钮/表单的id，class或xpath但我知道按钮的文本是什么。它会说：“Click here”。该页面只有该按钮和一些文本。

如何创建一个尽可能快的脚本，当它出现时点击按钮？

这只是一个例子，我知道getElementByText/getElementByValue不存在：

<html>
    <body>
        <div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint</div>

        <button>Click me<button>          

        <form> 
            <input type="submit" value="Click me">
        </form>

        <div> occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita</div>
    </body>

</html>

<script>
    intervalFunction(){
        setInterval(clickFunction, 500);
    }

    clickFunction(){
        if(docment.getElementByText("Click me")){
            document.getElementBy("Click me").click();
        }

        else if{docment.getElementByText("Click me")){
            document.getElementvalue("Click me").click();}

        }
        else 
           intervalFunction();
    }
</script>

Answer 1

var interval = setInterval(function () {
    if (document.querySelectorAll("input[value='Click me']").length > 0) {
        document.querySelectorAll("input[value='Click me']")[0].click();
        clearInterval(interval);
    }
}, 100);

希望这会有所帮助..

Answer 2

你标记了这个jQuery - 它可以像

一样简单

// The code you need
var tId;
$(function() {
    tId=setInterval(function() {
      var $but=$("[value='Click me']");
      if ($but.length>0) {
        console.log("found");
        clearInterval(tId);
        $but.click();
      }  
    },100)
});


//------------------------------------------------
// other code that inserts and shows it's clicked
$(function() {
  $("#container").on("click","[value='Click me']",function() {
    console.log("clicked");
  });

  setTimeout(function() {
    $("#form1").append('<input type="button" value="Click me">');
    },3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint</div>


        <form id="form1"> 

        </form>

        <div> occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita</div>
   </div>

Answer 3

您可以选择带有attr /值选择器的按钮

$('input[type="button"][value="Click  here"]').on('click',function(){
//code
});

Answer 4

也许会有所帮助：

＆＃13;

$('input[value="ClickMe"]').click();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="ClickMe" onclick="alert('clicked');" />

＆＃13;

Answer 5

由于表单/按钮将在未知时间出现，您可以使用MutationObserver并监听DOM更改。

我在片段中使用setTimeout来模拟动态添加的按钮。

＆＃13;

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var element = document.querySelector('#target');
setTimeout(function() {
  $(element).append('<button>Click here</button>');
}, 3000)

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log('Button found do the needful');
      //$(":button:contains('Click here')").get(0).click();
    }
  });
});

observer.observe(element, {
  childList: true //configure it to listen to attribute changes
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target"></div>

＆＃13;

当它出现在页面上时，单击按钮/提交

5 个答案: