如何讓 JS 腳本在導航后繼續運行（谷歌瀏覽器控制台）

Question

說我有一個簡單的腳本

var i = 0;
test();
function test() {
     console.log(i++);
     setTimeout(test, 1000);
}

我把它放在 Google Chrome 控制台中。 如何讓它在頁面導航到另一個后繼續運行（瀏覽網頁時應該繼續打印數字）？

也許將變量“i”保存在 onbeforeunload() 函數中，並使用該保存的變量啟動一個新腳本？

Answer 1

頁面導航到另一個頁面后如何讓它繼續運行

你不能，腳本不能在另一個頁面上繼續，它是在頁面中運行 javascript 的瀏覽器，並且在移動到另一個頁面時會停止它。

(或) 瀏覽網頁時應該繼續打印出數字嗎？

你自己回答了這個。 您當然可以將計數器保存在 localstorage 中並在下一頁繼續計數，前提是下一頁包含相同或相似的腳本以及從 localStorage 恢復計數器的邏輯。

或者，您可以將此邏輯的一部分移至服務器端腳本。

Answer 2

我沒有看到任何關於我正在嘗試做的事情的好的建議，但我想出了一些對我有用的東西。 我想在頁面上添加一個導航元素，並且在導航后不要讓它消失。 這是在一個不是我管理的網站上。 我刪除了頁面主體的 innerHtml，添加了一個 iframe 並將其指向我所在的頁面，將其設置為 100% 寬度和高度並刪除邊框。 然后我可以在 iframe 中導航，但仍然讓我的腳本函數在設置的超時時間內運行，以便在導航后將導航元素添加回頁面。 像這樣的東西：

document.body.innerHTML = ''
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
document.body.appendChild(iframe);
iframe.setAttribute('src', window.location.href);
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.border = "0";
function addContent(){
    setTimeout(()=>{
    elementToAddTo = iframe.contentWindow.document.getElementById('my-element-id')];
    contentToAdd = document.createElement('div');
    contentToAdd.innerHTML = `<p>My new content</p>`
    elementToAddTo.insertBefore(contentToAdd, elementToAddTo.childNodes[0]);
    }, 1000);
}
addContent()

然后在某個地方的新內容中，我有一個 onchange 事件，它將通過說 window.top.addContent(); 來導航和調用 addContent 函數；

onchange="window.location.href = window.location.href.replace(/(param1=.*)/, 'param1='+myNewParamValue); window.top.addContent();">

我了解這種方法對您正在嘗試做的事情做出了很多假設，也許它只對我有用，因為我只是在更改參數值，但我想留下這個聲音，以防它有助於有人試圖弄清楚出如何做類似的事情。

Answer 3

我想這個腳本是一個例子，顯示數字並不是你真正想要做的。

如果您正在尋找即使離開瀏覽器也能運行腳本的東西，我建議您查看Service Workers 。

如果您需要更多資源，可以查看 Jake Archibald 的博客。 他是一名 chrome 開發人員，他總是在談論服務工作者。 這里有一個介紹。