DOM在页面更新后包含旧元素

DOM contains old element after page update

本文关键字：包含旧 元素 更新 DOM      更新时间：2023-09-26

我正在开发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。仍在寻找一个好的解决方案，除非提出的解决方案是最好的。

编辑、更新

尝试

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);
});

请参阅cache 上的jQuery ajax设置

相关文章：