Question

我目前正在构建一个谷歌扩展程序，这就是我想要的：

在awesome.page1.html上执行某些操作，然后自动按下一页。加载新页面后，填写表单的文本字段。

我的问题是即使我知道如何填写文本字段，我也不知道如何在页面2加载后告诉它填写它。它一直试图在第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);
  }
}

我正在使用警报进行测试，即使它仍然在第1页上，我仍然继续获得“Page 2已启动”。我正在检查是否仅存在于第2页的元素是起来。我如何确保第2页已启动？

Answer 1

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

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

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

Answer 2

嗯，你的代码在这里：

document.getElementsByClassName("myformTextField imageName")

在找不到任何内容时返回一个空数组，而不是undefined。因此，无论是否找到您的项目，您的第一个if条件将始终为真。

相反，请检查getElementsByClassName返回的长度或使用querySelector并检查是否为空

if (document.getElementsByClassName("myformTextField imageName").length) { ... }

// Or..
if (document.querySelector('.myformTextField.imageName') !== null) { ... }

Answer 3

我选择使用的最简单的方法是内容脚本匹配。

我所做的是在我的扩展程序中创建两个单独的javascript文件：1.js和2.js.当awesome.page1.html加载时，它将运行1.js，当page2.html加载时，它将运行2.js。

我在manifest.json文件中所做的全部内容如下：

"content_scripts":[
        {"matches": ["http://awesome.page1.com/*"], "js": ["1.js"]},
        {"matches": ["http://page2.com/*"], "js": ["2.js"]}]

Answer 4

您应尝试使用 jquery 和$(document).ready(handler)

这确实是确保在尝试执行命令之前加载页面的最佳做法 http://api.jquery.com/ready/

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

4 个答案: