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

【问题标题】：Click on button/submit when it appears on page当它出现在页面上时单击按钮/提交
【发布时间】：2017-08-21 08:13:42
【问题描述】：

我有一个按钮或提交表单将在未知时间出现的页面。我不知道按钮/表单的 id、类或 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>

【问题讨论】：

您肯定能够计算出元素的 DOM 路径吗？
您显示的代码不是有效的 JS - document.querySelector("[value='Click me']") 会在纯 JS 中为您提供按钮，在 jQuery 中为 $("[value='Click me']"))
如果页面是您的，您可以随时在文档上添加change 事件，并在每次更改时查看所有按钮$( ":button" ) 并查看文本是否与Click here 匹配。但是，如果您不拥有该页面，那么这听起来像是作弊/黑客行为，您不应该这样做。希望这会有所帮助！
只是好奇你为什么会喜欢这种行为。对于答案，我不是一个完全的专家，但如果至少你知道它是一个按钮，你可以使用getElementByTagName()。如果它是一个提交按钮并且它的显示是否隐藏，您也可以过滤该帖子
这不是我的页面。我知道在特定日期的某个时间会出现一个按钮，我想尽快单击它。我只知道按钮文本 = 点击我。如何在不知道 id、xpath 或类的情况下创建一个脚本来单击按钮或输入？

标签： javascript jquery html

【解决方案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);

希望这会有所帮助..

【讨论】：

这在按钮已经存在时有效，但是当按钮不存在时我如何使用它？
即使按钮不存在也能正常工作，因为我们使用setInterval，它会每100ms检查一次按钮，如果按钮存在则触发点击事件。
用上面的代码替换“intervalFunction(){ setInterval(clickFunction, 500); }”
是的，但这不是我的网页。这是一个公共页面。如果我在我的 chrome 浏览器中打开网页。把脚本放在哪里？
然后你可以在chrome开发者工具的html页面中添加一个脚本标签，通过使用Edit As HTML

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

你需要委托和使用 setInterval
为什么按我的想法将事件附加到动态内容？

【解决方案4】：

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

在 sn-p 中我使用了setTimeout 来模拟动态添加的按钮。

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

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

【讨论】：

似乎从一开始就显示“找到的按钮”
@mplungjan，这是由于document.body 的监听元素
我觉得我的更简单兼容
@mplungjan，我的更快。无论如何，我认为 OP 似乎在为闪购创造黑客技术

【解决方案5】：

也许会有所帮助：

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

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

【讨论】：