2

这是一个技术性问题，我正在尝试更深入地了解浏览器中的 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。唉，那行不通，不足为奇，仍在尝试跳出框框思考！有任何想法吗？

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

4

1 回答 1

1

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

每当您通过地址栏加载页面时，iframe通过操纵当前页面浏览上下文的唯一位置对象来加载或像您提到的那样。

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

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

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

现代浏览器可让您以编程方式更改几乎所有内容：

  • 当前页面的标题。
  • 浏览器 URL 输入字段的内容。
  • 浏览器的历史，所以甚至后退/前进按钮等都可以工作（Mark Pilgrim 写了一篇很棒的文章，应该进一步澄清）。

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

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

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

于 2015-01-13T17:50:14.197 回答