Beim Schreiben von Skripten für einige Websites ist die Website manchmal eine SPA, und wenn sich der Inhalt der Seite ändert, kann das Skript dies nicht erkennen.Für diese Situation können die folgenden Methoden verwendet werden, um sie zu lösen:
Ich denke, die erste Möglichkeit wäre, auf das hashchange- Ereignis zu hören oder die pushState- Methode umzuschreiben.Das ist zwar eine Maßnahme, aber ersteres eignet sich nur für Websites, die den Hash-Modus verwenden, um SPA zu implementieren, aber es gibt nicht viele solche Websites (zumindest sehe ich sie selten. Ich war dort), verwenden die meisten Websites aus ästhetischen Gründen die History- API, um SPA zu implementieren, was letzteres ist. Letzteres gelingt aber nicht unbedingt immer, das möchte ich in folgendem Artikel schreiben: Was soll ich tun, wenn pushState umschreiben für die mit History api implementierten SPAs nicht funktioniert.
Der Grund, warum das Umschreiben von pushState nicht funktioniert
Bevor ich vorstelle, wie Seitenänderungen in dieser Situation überwacht werden, möchte ich erörtern, warum das Umschreiben von pushState nicht funktioniert. Ich spekuliere, dass es sich um ein Framework handeln soll, das von einigen Websites verwendet wird.Wenn das Framework initialisiert wird, wird der Verweis auf die History -bezogene API abgerufen , sodass es zu spät ist, wenn das Skript eingefügt und dann pushState umgeschrieben wird, da die Website dies bereits getan hat eine Sicherung von pushState Dies ist natürlich nur meine Vermutung. Gerne können Sie die spezifischen Gründe im Kommentarbereich diskutieren.
MutationObserver und baseURI
Für Websites, bei denen das Umschreiben von pushState nicht funktioniert, können Sie MutationObserver verwenden , ein natives js-Tool zum Erkennen von Seiten-DOM-Änderungen. Denn selbst wenn die SPA das Dokument nicht überlastet, wird es definitiv DOM-Änderungen beinhalten, sodass wir die DOM-Änderungen überwachen und dann den Basis-URI der geänderten Elemente überprüfen können, um festzustellen, ob sich die aktuelle Webseite geändert hat.
Siehe folgenden Code:
const callback = (records)=>{
//逻辑代码写在这
}
const observer = new MutationObserver(callback)
observer.observe(document.body, {
//选项设置，这是只是举例说明
childList: true, //是否监听子代元素变化（新增，删除或者更改）
subtree: true //是否监听目标元素的所有后代元素
})
andere
Tatsächlich wollte ich ursprünglich Object.defineProperty verwenden, um die state- Eigenschaft von History direkt zu überwachen , stellte aber fest, dass die setter- Methode des state nicht aufgerufen wird , wenn Methoden wie pushState den state ändern . Später habe ich versucht, History oder Location direkt zu überwachen , aber festgestellt, dass diese beiden Eigenschaften nicht neu definiert werden können. Dies sind die internen Codes des Browsers, daher ist es nicht einfach, in die Tiefe zu gehen.
Referenzlink:
Das Script ist nur auf der aus dem Backend geladenen Seite sinnvoll, die im Frontend generierte Seite aber nutzlos?