首頁猿問 Chrome/Opera...

Chrome/Opera `window.onpopstate` 錯誤

JavaScript

偶然的你 2023-08-18 17:04:46

我正在嘗試處理window.onpopstate我的單頁應用程序中的事件，但在 Google Chrome 和 Opera 中它不起作用。這是我的簡單 html 頁面<html>? ? <head>? ? ? ? <meta charset="utf-8" />? ? ? ? <script>? ? ? ? window.onpopstate = function(e) {? ? ? ? ? ? alert('onpopstate');? ? ? ? }? ? ? ? setTimeout(function () {? ? ? ? ? ? history.pushState(1, 'Hello John', '/hello/john');? ? ? ? }, 2000);? ? ? ? setTimeout(function () {? ? ? ? ? ? history.pushState(2, 'Hello Emily', '/hello/emily');? ? ? ? }, 3000);? ? ? ? </script>? ? </head>? ? <body></body></html>當我點擊瀏覽器的后退按鈕時，我希望看到帶有onpopstate顯示文本的警報。在 Safari、Firefox、Vivaldi 中，它按預期工作。在 Chrome 和 Opera 中，它從未調用過，它只是通過重新加載來轉到上一頁，這對我的 SPA 來說是一個糟糕的情況。更奇怪的是我發現了一些讓它發揮作用的技巧：轉到開發工具，控制臺選項卡但是，如果我在有或沒有超時的頁面上的腳本中執行相同的操作，則此技巧根本不起作用。因此，我發現完成工作的唯一方法是手動轉到控制臺并執行。console.log(history)console.log(window)onpopstateconsole.log(history)也許我錯過了什么？任何幫助，將不勝感激。我的環境：macOS 11.0.1 (20B29)Chrome 87.0.4280.67（官方版本）(x86_64)歌劇 72.0.3815.378解決方案：好吧，這不是一個錯誤，這是一個功能！這是interact firstChromium 的一個特性。如果用戶首先以某種方式與頁面交互，那么一切都會正常，否則back button將通過重新加載返回。例如，只需在正文中添加一些按鈕并先單擊它，然后嘗試back在瀏覽器中單擊。<body> ????<button?onclick="alert('hello');">alert</button> ????</body>

查看完整描述

2 回答

慕后森

TA貢獻1802條經驗獲得超5個贊

為了能夠運行一些 JavaScript，例如移動歷史記錄或播放聲音或彈出窗口，用戶首先必須在網站上進行交互（單擊）。

反對回復 2023-08-18

互換的青春

TA貢獻1797條經驗獲得超6個贊

我在 MDN 上找到了一個注釋。它說：

注意：調用history.pushState()或history.replaceState()不會觸發popstate事件。popstate 事件僅通過執行瀏覽器操作來觸發，例如在同一文檔的兩個歷史記錄條目之間導航時單擊后退按鈕（或在 JavaScript 中調用history.back()）。

我建議您將事件處理程序注冊到WindowEventHandlers 的 onpopstate 屬性addEventListener()，而不是注冊到WindowEventHandlers的onpopstate屬性。

例子：

<html>

? ? <head>

? ? ? ? <meta charset="utf-8" />

? ? ? ? <script>

? ? ? ? ? ? // ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

? ? ? ? ? ? window.addEventListener('popstate', function(e) {

? ? ? ? ? ? ? ? alert('onpopstate');

? ? ? ? ? ? }

? ? ? ? ? ? setTimeout(function () {

? ? ? ? ? ? ? ? history.pushState(1, 'Hello John', '/hello/john');

? ? ? ? ? ? }, 2000);

? ? ? ? ? ? setTimeout(function () {

? ? ? ? ? ? ? ? history.pushState(2, 'Hello Emily', '/hello/emily');

? ? ? ? ? ? }, 3000);

? ? ? ? </script>

? ? </head>

? ? <body></body>

</html>

反對回復 2023-08-18

慕斯王

TA貢獻1864條經驗獲得超2個贊

使用 anObject表示state。

狀態對象是一個 JavaScript 對象，與 PushState() 創建的新歷史記錄條目相關聯。每當用戶導航到新狀態時，都會觸發 popstate 事件，并且該事件的 state 屬性包含歷史記錄條目的狀態對象的副本。

const log = Logger();

// create 3 'history pages'

history.pushState({page: 1, greet: "Hello John"}, '', "#John");

history.pushState({page: 2, greet: "Hello Emily"}, '', "#Emily");

history.pushState({page: 3, greet: "Hello James"}, '', "#James");

log(`current history state: ${JSON.stringify(history.state)}`);

// on popstate log the history state if applicable

window.addEventListener("popstate", () =>

? history && history.state && log(`${history.state.greet || ""} @page ${

? ? history.state.page} (location: ${location.hash})`)

);

// listener for the buttons

document.addEventListener("click", evt => {

? if (evt.target.nodeName === "BUTTON") {

? ? return evt.target.id === "back" ? history.back() : history.forward();

? }

});

// helper function for logging in the document

function Logger() {

? let logEl;

? if (typeof window === "object") {

? ? logEl = document.querySelector("#log") || (() => {

? ? ? document.body.append(

? ? ? ? Object.assign(document.createElement('pre'),?

? ? ? ? {id: "log"}));

? ? ? return document.querySelector("#log");

? ? })();

? ? return (...logLines) =>?

? ? ? logLines.forEach(s => logEl.textContent += `${s}\n`);

? } else {

? ? return (...logLines) =>?

? ? ? logLines.forEach(ll => console.log(`* `, ll));

? }

}

<button id="forward">1 forward >></button>

反對回復 2023-08-18

2 回答
0 關注
293 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Chrome/Opera `window.onpopstate` 錯誤

Chrome/Opera `window.onpopstate` 錯誤

2 回答

添加回答