JQuery点击函数仅首次生效，批量点击链接报错求助

嘿，我来帮你搞定这个问题！你遇到的这个Uncaught TypeError: Cannot read property 'document' of null错误，大概率是第一次点击链接后页面发生了导航跳转导致的——原来存在$el里的DOM链接节点，在页面跳转后就脱离了当前文档的上下文，甚至整个脚本的执行环境都被重置了，所以第二次调用click时，这些节点关联的document已经变成null，自然就报错啦。

为啥会出现这种情况？ #

• 当你点击第一个链接后，浏览器会加载新的页面，原来页面的DOM树会被完全销毁，$el里存的那些DOM节点也就失去了和当前document的关联，后续再对这些节点执行click()操作，肯定会出问题。
• 另外，如果你的脚本是在原页面的上下文中运行，页面跳转后原脚本的执行上下文会直接终止，搞不好$el变量都直接变成null了。

怎么解决？ #

既然你的需求是遍历所有链接逐个点击，咱们换个思路：先把所有链接的URL提取出来存成字符串数组，然后逐个处理这些URL，而不是直接操作DOM节点。这样就算页面跳转，咱们手里还有保存好的URL列表，就能继续操作啦。

修改后的代码参考 #

var workflow = {
  preScrape: function(request, callBack) {
    console.log("starting Pre-scrape hook NOW");
    // 先把所有链接的href属性提取出来，存成数组
    var linkUrls = Array.from($el).map(link => link.href);
    
    // 写个递归函数来逐个处理链接
    function clickNextLink(index) {
      // 所有链接处理完就执行回调
      if (index >= linkUrls.length) {
        callBack();
        return;
      }
      
      // 这里给你两种打开方式选：
      // 方式1：在当前窗口打开，适合需要在新页面继续操作的场景，但要等页面加载完再处理下一个
      window.location.href = linkUrls[index];
      // 如果是爬虫场景，得监听页面加载完成事件，再调用clickNextLink(index+1)
      
      // 方式2：在新标签页打开，不会影响当前页面的脚本上下文，加个延迟避免浏览器限制
      window.open(linkUrls[index], '_blank');
      setTimeout(() => clickNextLink(index+1), 1000);
    }
    
    // 从第一个链接开始处理
    clickNextLink(0);
  }
};

额外提醒 #

如果是做爬虫或者自动化操作，真心建议用专门的工具比如Puppeteer，它能完美控制页面导航和上下文切换，根本不会遇到这种DOM丢失的问题。要是必须在原页面脚本里处理，得确保页面跳转后脚本还能继续执行（比如用后台脚本或者监听页面加载事件），不过这种方式局限性挺大的。

内容的提问来源于stack exchange，提问作者C Wilson