如何在不更改页面URL的情况下使用JavaScript进行转发？

Question

我有一个主页，想要导航到其他页面，比如博客或画廊，但不想更改地址栏中的URL。我知道在服务器端是可以实现的，但如何使用Javascript实现呢？

这是我的HTML/JS代码：

//HTML
<ul>
  <li><a onclick="openPage('contact.html')">Contact Us</a></li>
  <li><a onclick="openPage('blog.html')">Blog</a></li>
  <li><a onclick="openPage('gallery.html')">Gallery</a></li>
</ul>

//Javascript
function openPage(url){
     //   All these will forward but will change the URL
     //window.open(url);
     //window.location.href=url;
     //self.location=url;
     //window.location.replace(url);
}

最初，URL 将是 http://something.com/mainpage.html

即使导航到任何页面，它也应该保持不变。

这是我所拥有的非常简单的示例。那么，客户端是否可以在没有服务器的情况下实现呢？如果不能，则在服务器端上执行最简单的方法是什么？假设我正在使用 Java/JSF。

- LetsFlow

---

为什么？这样做只会破坏人们书签或链接内容的能力。 - Quentin

只需提交表单，然后在服务器端执行任务。 - Bajrang

@Quentin 这个例子非常简单，但是符合我的需求。在我的应用程序中，导航到的页面将在短时间内过期，不需要为这些页面添加书签甚至URL。 - LetsFlow

Answer 1

如果您想要防止页面重新加载，您将不得不添加哈希#。 css-tricks.com有一段很棒的视频教程，可以查看：最佳实践：动态内容。请在stackoverflow上检查这个问题：改变URL而不重新加载页面。

- Ghostman

---

但是我确实希望页面重新加载，因为我正在导航到一个新页面，不是吗？ - LetsFlow

这不是与 OP 想要的完全相反吗？ - slebetman

Answer 2

我会给你一个提示，然后你可以自己编写代码。

使用ajax，获取要打开的整个页面。（我假设它们在同一台服务器上。）

然后解析html.responsetext并找到获取页面的body.innerHTML。
然后使用document.body.innerHTML=fetched_body_innerHTML;
以类似的方式更改document.title。

我假设两个页面都具有相同的CSS（为了保持外观的一致性），很可能加载了相同的js文件。

如果两个页面具有不同的CSS和/或js文件集，则需要创建其他节点并删除旧的script/link节点。（但是，结果将不完全相同，因为旧的JS已经加载，并且在更改body的innerHTML后不会触发body.onload。）

- anishsane