在页面重新加载后运行JS

Question

在重新加载页面后，我能否运行JavaScript代码？

在我的情况下，我想通过地址栏输入javascript: <<CODE>>来执行代码。

重新加载页面多次，并检查是否存在一个特定id的按钮并单击它。这是我的代码：

function check () {
    if(new Date().getTime >= 1442949420000) {
        var loginbtn = document.getElementById('loginbutton');

        if(loginbtn){
            loginbtn.click();
        } else {
            console.log('button not yet here - reload');
            window.location.reload();
            check();
        };
    } else {
        console.log('to early - reload');
        window.location.reload();
        check();
    };
};
check();

问题是，在window.location.reload()之后页面重新加载，check()函数从未被调用，因此页面只会重新加载一次。

或者有没有一种服务可以将我的脚本注入到一个URL中？

- Daniel Alexander Benesch

---

你的函数会在重新加载后被调用，因为你在声明下面调用了它。无需在重新加载后再次调用它。 - guramidev

如果您是从地址栏手动调用它，我不知道如何使其在浏览器中工作，因为JS脚本在页面重新加载时停止执行。 您可以存储状态（例如cookie，localstorage等），并重新运行脚本（再次输入，保存在书签中），以从离开的地方继续。另一种选择是使用浏览器扩展程序（例如userscripts，tampermonkey等）或使用非浏览器导航/操作页面（例如phantomjs，casper等）。 - arcyqwerty

我认为它不会像你想的那样工作，Gurami。页面将重新加载，并且不会停留在JavaScript方法的同一点上。 - Matt Runion

Answer 1

您可以在地址栏中添加URL片段，然后重新加载页面。因此，在重新加载之前，您将位于http://yoursite.com/yourPage，重新加载后，您可能会到达http://yoursite.com/yourPage#reload。以下是一个简单的可行示例：

    document.getElementById("clickMe").onclick = function clicked(){
     window.location.hash = 'reload';
     window.location.reload();
    }
    
    //When the document has loaded, call the function
    document.addEventListener("DOMContentLoaded", function(event) { 
     if(window.location.hash == "#reload"){
      console.log("The Page has been reloaded!");
     }else{
      console.log("The page has a new hit!");
     }
    });

    <button id="clickMe" type='button'>click</button>

当您单击按钮时，哈希将添加到窗口位置，然后重新加载页面，并附加URL片段。然后我在文档就绪函数中决定页面是否已重新加载。请确保在本地进行测试。

- IanGabes

---

被低估的技巧。有点hacky，但很简单。window.onload和$(myFunction)让我失望了。 - Sinjai

同意，尝试了几种window.onload的实现方式，但都没有起作用。这个方法非常好用，而且更符合我的需求。在我看来，这种方法比其他替代方案更加优雅。 - Dev

Answer 2

如果您想要从浏览器控制台运行代码，则另一种方法可以是：

1. 在您想要测试 PageA 的页面上打开开发人员工具
2. 然后使用在 PageA 上执行的 JavaScript 在弹出窗口中打开相同页面（必须是相同的页面以避免跨域错误）
3. 将弹出引用保存在 JavaScript 变量中
4. 现在您可以对弹出窗口中的页面进行任何操作，即使它重新加载

示例：

function check() {
  var newwindow = window.open('https://yoursite.com', 'WindowTitle', 'height=200,width=150');
  if (new Date().getTime >= 1442949420000) {
    var loginbtn = newwindow.document.getElementById('loginbutton');

    if (loginbtn) {
      loginbtn.click();
    } else {
      console.log('button not yet here - reload');
      newwindow.location.reload();
      check();
    };
  } else {
    console.log('to early - reload');
    newwindow.location.reload();
    check();
  };
};
check();

- Inquisitive

Answer 3

个人而言，我不会修改URL。如果您在按钮点击后将用户发送到另一个URL，则可以这样做，但否则，如果用户决定手动刷新页面，则可能会卡在已修改的URL上，并且该函数将每次执行。

相反，我会在重新加载之前设置一个sessionStorage项目，在重新加载时读取它以执行函数（如果准备就绪），或者如果没有准备好，则再次重新加载，然后在完成后将其删除。

现在我不明白为什么多次重新加载页面直到满足条件是一种好的做法。为什么不使用setInterval来检查条件呢？

- tuancharlie