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

Javascript: Performing action once the next page has loaded?

本文关键字：执行 操作 一页 加载 Javascript      更新时间：2023-09-26

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

在awesome.page1.html上做点什么，然后自动按下一页。加载新页面后，填写表单的文本字段。

我的问题是，即使我知道如何填写文本字段，我不太知道如何告诉它填写一旦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页的元素是否出现了。我怎样才能确定第二页已经打开了?

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

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

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

你的代码在这里:

document.getElementsByClassName("myformTextField imageName")

在没有找到undefined的情况下返回一个空数组。因此，你的第一个if条件总是为真，不管它是否找到你的项目。

相反，检查getElementsByClassName返回的长度或使用querySelector并检查null

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

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

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

我所做的一切在我的清单。Json文件如下:

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

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

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

相关文章：