3

我有一个主页，我想导航到其他页面，比如博客或画廊，但地址栏中的 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。

4

2 回答 2

2

#如果要防止页面重新加载，则必须添加哈希。

css-tricks.com 有一个很好的截屏视频，看看：

动态内容的最佳实践

请在 stackoverflow 中检查此问题，更改 URL，无需重新加载页面

于 2012-11-01T07:23:52.873 回答
0

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

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

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

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

如果您在 2 个页面上有不同的 CSS 和/或 js 文件集，您将需要创建额外的节点并删除旧的脚本/链接节点。（但是，结果将不一样，因为旧的 JS 已经加载，并且在您更改 body 的 innerHTML 后不会触发 body.onload。

于 2012-11-01T07:36:31.500 回答