Question

说我有一个简单的脚本

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

我把它放在谷歌Chrome控制台中。如何在页面导航到另一个页面后继续运行（在浏览网页时应继续打印数字）？

也许在onbeforeunload（）函数中保存变量'i'，并用该保存的变量启动一个新脚本？

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();">

我了解这种方法会对您要执行的操作做出很多假设，也许它仅对我有用，因为我仅更改了param值，但是我想保留此消息，以防它对某人有所帮助试图弄清楚如何做类似的事情。

Answer 3

我认为这个脚本是一个例子，显示数字并不是你想要做的。

如果您在离开浏览器时正在寻找可以运行脚本的内容，我建议您查看Service workers。

如果您想要更多资源，可以查看Jake Archibald的博客。他是一名铬开发人员，他一直在谈论服务工作者。简介here。

如何在导航后继续运行JS脚本（谷歌Chrome控制台）

3 个答案: