Question

我正在开发一个新的网站，虽然我希望尽可能轻松地完成它，但我还想使用某种重叠页面的navegation。

我的想法是在当前页面上有文章，当点击时会在浮动div上打开。这不是真正的问题，因为使用jquery .load（）它很容易做到，但我的问题是它不会修改当前的url，所以它仍然是www.myweb.com例如我想当文章被打开时，让它像www.myweb.com/current-article一样。一旦你有了该文章的特定网址，如果它被共享，那么打开该链接的任何人都将访问该网站并打开文章。

我希望这一切都有道理，但在USA Today或Play.Spotify

中可以找到一个很好的例子

我正在为网站使用umbraco 7和javascript。知道如何做到这一点？

Answer 1

其被称为哈希基础导航

 location.hash = "#myHash"; //sets the url plus hash

如果用户手动更改网址或使用后退按钮

，则会触发以下内容

 window.onhashchange = function()
{
     if (location.hash === "#myHash") 
        {
    doSomething();
        }  
}

Answer 2

这实际上是一项正确实施的大而复杂的任务。

我建议你使用Backbone.Router http://backbonejs.org/#Router。它使用历史api＆＃34; new＆＃34;浏览器，在旧浏览器中回退到主题标签。

一些伪代码：

首先定义您的路线。它将捕获www.myweb.com/articles/*

下的所有页面

var MyRouter = Backbone.Router.extend({

  routes: {
    "articles/:page": "loadPage"
  },

  loadPage: function() {
    var div = $("#overlay");
    div.html($.load("your page"))
    div.show()
  }
});

您需要实现一些逻辑来测试加载的页面是否不在文章/ 下。*

加载页面时的Init MyRouter：

var router = new MyRouter();
router.start()

当您点击www.myweb.com/articles/cool-article

时，现在会打开叠加页面

如果要从父页面打开页面，只需调用

即可

$("button").click(function(){
    router.navigate("articles/cool-article", {trigger: true});
});

在div上加载外部页面并同时获取特定URL

2 个答案: