在 div 上加载外部页面并同时获取特定的 url答案

【问题标题】：Load external page on div and getting a specific url at the same time在 div 上加载外部页面并同时获取特定的 url
【发布时间】：2015-06-18 11:37:57
【问题描述】：

我正在开发一个新网站，虽然我想让它尽可能易于导航，但我也想对重叠页面使用某种导航。

我的想法是让当前页面上的文章在单击时会在浮动 div 上打开，而不是其余部分。这不是真正的问题，因为使用 jquery .load() 很容易做到，但我的问题是它不会修改当前的 url，所以它仍然是 www.myweb.com 例如，我想打开文章时，它就像 www.myweb.com/current-article 一样。获得文章的特定 URL 后，如果它是共享的，那么打开该链接的任何人都将访问在该文章上打开文章的网站。

我希望这一切都有意义，但可以在 USA Today 或 Play.Spotify 中找到一个很好的例子

我在网站上使用 umbraco 7 和 javascript。知道怎么做吗？

【问题讨论】：

stackoverflow.com/questions/16980735/…

标签： javascript jquery umbraco frontend

【解决方案1】：

它称为哈希基础导航

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

如果用户手动更改 URL 或使用后退按钮，则会触发以下操作

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

【讨论】：

OP 不想要标签。
这种基于主题标签的解决方案可能有效，但对于我们的项目，我们需要一些不依赖于自定义 URL 的东西。 Morten 的样本似乎更适合这里。但是，我也不知道这个系统，我相信这会帮助我完成其他任务！呵呵，谢谢。
@MYbuddy 很高兴它有帮助

【解决方案2】：

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

我建议你使用 Backbone.Router http://backbonejs.org/#Router。它在“新”浏览器中使用历史 API，在旧浏览器中回退到主题标签。

一些伪代码：

首先定义您的路线。它将捕获 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()
  }
});

你需要实现一些逻辑来测试加载的页面是否不在articles/.*

页面加载时初始化MyRouter：

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

现在，当您点击 www.myweb.com/articles/cool-article 时，覆盖页面将打开

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

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

【讨论】：

谢谢，莫腾。你是对的，这似乎是我需要使用的。在解决这个问题之前，我将开始玩弄这个看看。干杯！