页面更新后 DOM 包含旧元素

Posted 2023-05-09

【中文标题】页面更新后 DOM 包含旧元素

【英文标题】：DOM contains old element after page update

【发布时间】：2014-10-19 06:10:36

【问题描述】：

我正在开发一个 Chrome 扩展程序（这个问题不需要任何知识......），当我访问具有特定域的页面时，我有一个正在运行的脚本。所做的就是从页面中的<meta> 标记中获取attribute 值：

$('meta[itemprop=contentURL]').attr('content')

这在第一个页面加载时效果很好。但是，位于页面内也有指向相关内容的链接。如果我单击其中一个相关链接，Chrome 微调器会旋转一点，加载新内​​容并更新地址栏中的 URL。

但是，如果我尝试上面的 jQuery，我会得到旧的属性值，而不是新页面上的新属性值。在使用 Chrome 的 Inspect Element 时，我看到旧属性值在那里，但如果我使用 view page source 代替，新属性值在那里。

所以看来 DOM 是旧的......有没有获得更新的 DOM 的好方法？这个问题与我查看过但没有得到任何答案的 DOM vs Page Source are different 线程的所有其他问题一起出现。

有没有一种好方法来获取具有更新属性的新 DOM？谢谢。

编辑：这是 chrome 扩展代码的样子：

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) 
    // request current page , `cache:false`
    $.ajax(url:window.location.href, cache:false)
    .done(function(data) 
    var content = $(data).filter("meta[itemprop=contentURL]").attr("content");
    console.log(content);
  );
);

以上代码记录undefined。除非建议的解决方案是最好的，否则仍在寻找一个好的解决方法。

【问题讨论】：

听起来您所在的页面正在通过 AJAX 动态更新可见内容，而不是导航到新页面。大多数网站不会费心更新元数据，因为机器人/等通常会重新请求页面。

@abraham - 感谢您的回复。这绝对是可能的，至少不会让我感到惊讶。有什么好的方法可以解决这个问题，或者下面的 guest271314 的回答是一个好方法吗？

在检查中看不到更新信息的事实意味着它没有在 DOM 中更新。您的内容脚本无法访问“更新”信息。当您调试它时，建议的解决方案可能会起作用 - 它会为该 URL 创建一个新请求（就像“查看源代码”一样）。不过，我会寻找其他方法来找到您需要的东西。

我能想到的唯一其他解决方案是刷新选项卡（因为 URL 已更新），然后再次发送内容脚本。

@joshft91 这可能是一个非常不和谐的用户体验。

【参考方案1】：

编辑、更新

试试

v2 (javascript)

function done() 
  var div = document.createElement("div");
  var content = this.responseText;
  div.innerhtml = content;
  content = div.querySelectorAll("meta[itemprop*=contentURL]")[0].content;
  console.log(content);


var request = new XMLHttpRequest();
request.onload = done;
request.open("GET", window.location.href + "?=" + (new Date().getTime()), false);
request.send();

v1（使用 jquery 的 JavaScript）

// request current page , `cache:false`
$.ajax(url:window.location.href, cache:false)
.done(function(data) 
  var content = $(data).filter("meta[itemprop=contentURL]").attr("content");
  console.log(content);
);

见jQuery-ajax-settingscache

【讨论】：

有时间我会试一试。谢谢。

似乎不起作用。我更新了主帖，以反映我的代码在您的建议中的样子。每次点击相关内容都会触发，但是控制台会记录undefined，所以我不确定会发生什么。

undefined 是 jquery 吗？ , 除非包含在 manifest , content_scripts 中。由于 jquery 是 Question 的“标签”，因此在 post 上发布了 v1。

console.log(content) 是 undefined。 jQuery 正在我的manifest.json 文件中加载，因此它应该正在执行。我会试试你的 v2，但我不确定在哪里调用函数 done() - 除非我在某个地方错过了它。

参考 v1，确定 jQuery 已加载，可以试试alert(jQuery().jquery) 吗？另外，尝试将url 更改为页面的完整路径，并减少到仅.filter("meta")？在 v2 request.onload = done; 调用 done() 。谢谢