页面更新后 DOM 包含旧元素

Question

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

Answer 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