javascript - 浏览器 javascript 中是否存在持久性 DOM 之类的东西？

Question

这是一个技术问题，我想更深入地了解浏览器中的 javascript。

所以场景是 page1 上唯一的东西是一个链接，可能还有一些 JS:

<script>something</script>
<a href="/page2.php">link</a>

当第 2 页链接被点击时，一些 javascript 是否可以“转移”到第 2 页，这样 JS 就可以在第 2 页上运行，而不需要它原来在标记中的任何脚本？

我想你可以这样做:

<a onClick="loadXMLDoc();" href="/page2.php">link</a>

loadXMLDoc 函数摘录:

var xmlhttp;
xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
      {

window.location = "/page2.php";

if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
alert('worked');

}
...
xmlhttp.open("POST","/responsedelay.php",true);
...

想法是向一个单独的页面发出 ajax 请求，上面有一个计时器(在 php 中)，并在几秒钟后(比如 10 秒)给出响应。到那时，新页面已经加载，我们希望仍然可以通过 javascript 访问当前窗口的 DOM。唉，这没有用，不足为奇，仍在尝试跳出框框思考!有什么想法吗？

我猜唯一的方法是在第 1 页的上下文中打开第 2 页(即将第 2 页元素添加到第 1 页)，但也许有一种我不知道的新方法!

Answer 1

https://html.spec.whatwg.org/multipage/browsers.html#browsing-context很好地解释了基本概念。

每当您加载页面时，无论是通过地址栏、加载 iframe 还是像您提到的那样通过操作 unique location object当前页面的浏览上下文。

简化:如果您更改位置，您当前页面的 DOM 将被丢弃(技术上取消引用，因此在大多数引擎中准备好进行垃圾收集 afaik)并由从新位置构建的 DOM 替换。

但是，您可以保留上下文和 window，但切换 DOM 的部分，这几乎是 window 下的所有内容。

Turbolinks评论中提到的正是这样做的:保留 window 对象和上下文，但替换文档 body。

现代浏览器允许您以编程方式更改几乎所有内容:

• 当前页面的标题。
• 浏览器 URL 输入字段的内容。
• 浏览器的历史记录，因此甚至后退/前进按钮等都可以使用(Mark Pilgrim 写了一个 great piece on this 应该进一步澄清)。

简而言之，您可以保留相同的页面，但对于用户来说，他们会四处浏览。 YouTube 就是一个很好的例子:当您浏览视频时，window 被保留，但是 body、部分标题、浏览器 URL 和标题等都变了。

YouTube 的优势在于他们不必为您访问的每个视频重新加载各种视频解码器库等，而是在您初次访问时重新加载。

缺点是您必须真正知道自己在做什么，因为错误会迅速复合并且您很容易破坏基本的用户流程(后退按钮等)。