Javascript:加载下一页后执行操作？

Question

我目前正在构建一个谷歌扩展，这就是我要做的:

Do something on awesome.page1.html then automatically press Next Page. When the new page has loaded, fill in a form's textfield.

我的问题是，即使我知道如何填写文本字段，我也不太清楚如何告诉它在 page2 加载后填写它。它不断尝试执行第 1 页上的所有操作。

这是我正在尝试的方法，但它不起作用:

function addEffect() {
  document.getElementsByClassName("effect1 shine")[0].click();
  document.getElementsByClassName("nextPage BigButton")[0].click();
  nextStep();
}

function nextStep() {
  if(document.getElementsByClassName("myformTextField imageName") != undefined) { 
         alert('Page 2 is up.');
  } 

  else {
         alert('Page 1 is still up.');
         setTimeout("nextStep()", 250);
  }
}

我使用警报只是为了测试，我不断收到“第 2 页已启动”，即使它仍在第 1 页上。我正在检查是否仅存在于第 2 页的元素是向上。我怎样才能确保 page2 已启动？

Answer 1

您将遇到的主要问题是 JavaScript 变量(包括函数)不会从一个页面持续到另一个页面。换句话说，您不能在一个页面上编写一个函数，然后让它在替换它的页面上执行。

您可以传递一个 URL 变量或设置一个 cookie 以实现数据持久性——或将设置存储在您的服务器上——但直接的 JavaScript 方法是行不通的。

当然，有些人使用一个小技巧将下一页的整个 DOM 加载到一个变量中(使用 XMLHttpRequest 的变体)，将存储的设置应用到内存中的对象，然后替换大部分大部分新 DOM 的文档主体，但这可能比您需要的复杂得多，并且它必须符合相同域的要求。