控制台修改的代码为什么在标签页就不能执行？

[zhaolinzeng]

console里添加的点击代码，代码作用是当检测到倒计时0秒的时候，延迟700毫秒，点击提交按钮。

这个代码，在当前标签执行没有问题，但是在同一个窗口里的其它多个标签都不会执行，其它标签只有切换到当前标签的时候才开始执行，手工验证过。可是如果把其它几个标签，一个个拉出来变成一个单独的窗口，只要不是最小化状态，就都正常执行，而最小化的窗口即便只有1个标签也不执行。

浏览器为qq浏览器和百分浏览器，一样的效果。

如何修改为在同一个窗口下的多个标签均可执行？求大家指正。

var timer = setInterval(function(){
var str = document.querySelector(".d-right.red-tip").innerHTML;
if (str=="倒计时 00时 00分 00秒") {
clearInterval(timer);
setTimeout(function(){
document.querySelector(".qn-btn.ensure-btn").click();
}, 700);
}
}, 20);

[zhaolinzeng]

前面说的太罗嗦，简单总结： 1、浏览器开3个相同的标签页倒计时自动点击，只有在当前的标签页才会执行自动点击代码，并且手动切换到哪个标签页，哪个标签页的代码才会开始执行。 2、把3个标签页分别拉出来变成3个独立的窗口，3个窗口的代码均正常执行自动点击。 3、把上述3个独立窗口最小化，则最小化后的窗口不执行自动点击代码，直到切换为当前窗口才开始执行代码。

[zhaolinzeng]

感谢解答，我先给分。不过我不太懂编程方面，代码实际上也不是我写的。 看了你说的，我不知道我理解的对不对：你是说获取所有标签页的这个按钮，然后做一个循环，到时间了把所有标签页的按钮从头点击一次？ 那么又衍生出新的问题： 1，你给出的这个点击所有标签页的按钮的代码，是只在一个标签页的console里执行就可以，还是每一个标签页都写一遍？ 2，实际上上面那段代码，我是每个标签页的console里都贴一遍的，然后手动修改实际间隔30毫秒，也就是800毫秒，830毫秒，860毫秒这样操作的。如果是统一执行，是不是还要加上时间间隔？ 3，页面实际有4个这个名字的按钮元素，我用到的是第一个按钮。能麻烦给一份完整的代码吗，我能大概看懂意思，但是我不会写，尴尬。

[zhaolinzeng]

我试了，一个窗口多个标签的情况下，不是当前标签，不执行。 我是用你那段代码替换我代码里点击的那一句，当前标签页的可以执行，不是当前标签页的不执行。

引用 2 楼 jio可 的回复:

document.querySelector 只能获取一个dom document.querySelectorAll才是获取所有。获取所有是一个伪数组没有click方法

let all = document.querySelectorAll(".qn-btn.ensure-btn");
for(let i = 0; i< all.length; i++){
  all[i].click()
}

[jio可]

document.querySelector 只能获取一个dom document.querySelectorAll才是获取所有。获取所有是一个伪数组没有click方法

let all = document.querySelectorAll(".qn-btn.ensure-btn");
for(let i = 0; i< all.length; i++){
  all[i].click()
}

[zhaolinzeng]

窗口就是指的浏览器，标签或标签页就是浏览器里的标签页。 我是只需要复制最后你说复制到浏览器的那段代码贴在任意一个标签页的console里执行就可以了吗？并把.btn改成.qn-btn.ensure-btn对吗？ 前面那一大段代码是做什么用的？

引用 6 楼 jio可 的回复:

窗口是指浏览器? 标签是指浏览器的标签页？ 上面这个是tab标签，是这种吧?

[jio可]

换成你的class名就可以，前面看是我写的tab，看来和你说的标签页不同了 浏览器的标签页是独立的，肯定不可能拿到所有同名dom... console的作用只能在当前的web页面

[jio可]

<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul,
  li {
    list-style: none;
  }

  ul {
    overflow: hidden;
  }

  li {
    float: left;
    color: #f60;
    padding: 20px 40px;
    margin-right: 10px;
    cursor: pointer;
    border: 2px solid #f90;
    transition: all ease .3s;
  }

  .box {
    width: 550px;
    margin: 10px auto;
    position: relative
  }

  li:hover {
    background: #f90;
    color: #fff;
  }

  li.tabin {
    background: #f90;
    color: #fff
  }

  .content-box {
    width: 550px;
    height: 250px;
    background: #f90;
    position: absolute;
    left: 0;
    top: 63px;
    overflow: hidden;
  }

  .content {
    clear: both;
    color: #fff;
    padding: 10px;
    opacity: 0;
    transition: all ease .3s;
    position: absolute;
    top: 0;
    left: 0;
  }

  .active {
    opacity: 1;
  }

  .content h1 {
    font-size: 18px;
    margin-bottom: 20px;
    margin-top: 20px;
  }

  .content p {
    font-size: 14px;
  }
  button {
    width: 100px;
    height: 40px;
  }
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<div class="box">
  <ul id="tablist">
    <li class="tabin">标签一</li>
    <li>标签二</li>
    <li>标签三</li>
  </ul>
  <div class="content-box">
    <div class="content active">
      <h1>标签一内容</h1>
      <p>标签一</p>
      <button class="btn" onclick="show(1)">按钮</button>
    </div>
    <div class="content">
        <h1>标签二内容</h1>
        <p>标签二</p>
        <button class="btn" onclick="show(2)">按钮</button>
    </div>
    <div class="content">
        <h1>标签三内容</h1>
        <p>标签三</p>
        <button class="btn" onclick="show(3)">按钮</button>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    $("#tablist li").each(function (index) {
      $(this).click(function () {
        $(".active").removeClass("active");
        $(".tabin").removeClass("tabin");
        $(".content-box div").eq(index).addClass("active");
        $(this).addClass("tabin")
      });
    })
  })

  function show(v){
    console.log('执行标签'+v+'按钮')
  }
  // 下面的代码复制到浏览器执行
  var btn = document.querySelectorAll('.btn')
  for (var i = 0; i < btn.length; i++){
    (index => {
      setTimeout(() => {
        console.log('执行click当前时间(毫秒):'+Date.now())
        btn[index].click()
      // 默认800毫秒后执行，其后每次递增30毫秒
      }, index * 30 + 800)
      }
    )(i)
  }
</script>

[jio可]

窗口是指浏览器? 标签是指浏览器的标签页？ 上面这个是tab标签，是这种吧?

[zhaolinzeng]

所以其实用不到获取全部btn，只需要获取第一个btn就可以了，所以我那段代码是可以执行的。 但是为什么在别的标签页不会执行呢？而且标签页最小化的时候也不执行。

引用 8 楼 jio可 的回复:

换成你的class名就可以，前面看是我写的tab，看来和你说的标签页不同了 浏览器的标签页是独立的，肯定不可能拿到所有同名dom... console的作用只能在当前的web页面