标签: html5-history

我正在移动一个Rails应用程序,它通过URL将新视图加载到完全AJAX版本.我们这样做的方式是通过AJAX加载所有视图并通过HTML5 History API更改URL.我们还想在整个过程中使用HTTP缓存,以便我们可以缓存每个部分.

但现在我们陷入了一个问题.现在基本上有两种方法可以加载每个页面 - 通过URL或点击通过AJAX加载部分内容的方法.但这导致我们创建两个不同的视图和控制器,基本上加载相同的东西 - 一个直接来自URL,一个通过点击主页面并通过AJAX和历史API加载.那么,当通过URL和AJAX直接加载时,我们如何确保从浏览器缓存中加载相同的视图？

举个例子,GitHub在它们的树形滑块中使用.您可以通过在窗口中浏览代码或直接使用URL路径直接访问代码.我确定如果之前已经加载了页面,它们会从浏览器缓存中获取部分内容.

有没有办法将请求发送到同一个URL但只是渲染部分或加载整个页面,具体取决于是通过单击选项卡还是在地址栏中输入请求？它应该使用缓存的部分,如果它们已经存在于浏览器中.

谢谢

我有一个网站mean-stack.

通常,我的所有外部参考都列在 index.html

我意识到我正在使用的一个外部JS库(例如,https: //cdnjs.cloudflare.com/troublelibrary.js)与我的网站的一部分有一些混淆.所以我正在寻找的解决方法是不为特定路径加载它https://www.myexample.com/specific.

有谁知道如何在路由中实现这一目标？

编辑1 :(见这里的完整问题)

实际上,有昏迷的图书馆是history.js.我一直加载它的初始代码如下.因此https://localhost:3000/home总是在浏览器中https://localhost:3000/home(即,#因为不会添加history.js)

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

然后,如果我尝试以下代码,Ben建议:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
    var newScript = document.createElement('script');
    newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
    document.head.appendChild(newScript);
    console.log(window.location.href)
</script>

我意识到第一次加载https://localhost:3000/home不会改变.但是,如果我刷新浏览器,它可以更改为https://localhost:3000/#/home.

所以附加脚本与直接引用不完全相同,有人知道为什么吗？

阅读https://developer.mozilla.org/en-US/docs/DOM/Manipulated_the_browser_history并使用 History.api 后，我想知道如何在中使用第一个参数

history.pushState(stateObj, title, url);

我知道 stateObj 是一个 js 对象，所以像这样：

{
  par1 : 'par1',
  par2 : 2
}

但我必须如何使用它呢？什么方法让我有可能稍后检索该对象。

我还了解到现在没有使用标题，我必须使用自己的 javascript 方法来更改页面的标题。我对吗？

我正在使用 ember1.0-rc3，我想将 hashbang url 更改为正常的 url 格式（即，www.site.com/admin#/page1 到 www.site.com/admin/page1）。为了做到这一点更改，我在应用程序路由器中使用位置：“历史记录”。

但是当我重新加载页面或书签页面不起作用时，它仅重定向到主页。我希望我的应用程序中的选项重新加载和书签，而不更改 .htaccess 文件中的重定向 URL。有什么办法吗？谢谢提前

我制作了一些Angular路线,如下面的代码所示.

app.config(function($routeProvider, $locationProvider, $provide) {
    $routeProvider
    .when('/', {
         templateUrl: 'home.html',
         controller: 'AppCtrl'
    });
    .when('/portfolio', {
        templateUrl: 'portfolio.html',
        controller: 'AppCtrl'
    })
    $provide.decorator('$sniffer', function($delegate) {
         $delegate.history = historyCompatCheck();
         return $delegate;
    });
    $locationProvider.html5Mode(true);
});

这工作正常,在我将基础href设置为"/"后,它接受了一个带有"/ portfolio"的href的锚,但是当我转到" http://url.com/portfiolo "或尝试重新加载页面时当我在投资组合路线上时,它会给我一个服务器错误.我能为此做些什么吗？

提前致谢.

我在一个相当复杂的应用程序中使用Iron Router,并且有一些路由将用户重定向到其他内部路由(例如,"/"始终重定向到"/dashboard").

我们一直在处理这个问题,只是在第一条路线的钩子上添加eg Router.go("/dashboard")或(容易混淆但同样无效).this.redirect("/dashboard")action

问题是,这会破坏浏览器的后退按钮:您将稍纵即退回到具有重定向操作的路径上,然后将重定向回到您所在的位置.

1. 围绕这个最好的方法是什么？
2. 有没有什么好的理由我们不应该只是替换而不是history.state默认推送this.redirect()？

Symfony注释模块中有什么东西允许我将它们用于其他用途吗？

我知道@Route,@Method你需要扩展现有的库,所以它不是那么容易我猜.

目前,我正在使用JS History API,并且很乐意将popState我的JS文件的数据放在注释中.因此,当路由生成URL时,它们已经可用.

问:这里有一个HTML5带注释的标题或某个属性是否有意义？能够在已经存在的路由名称和内容旁边定义注释的数据是很棒的.

问:之前是否有人使用过注释进行了调整？

我想澄清我的意图,因为我认为我遗漏了一些关键细节(提到历史API)来理解我的用例.

有一些SPA前端通过前端捆绑集成,这通过AJAX调用连接到后端捆绑,这是一个直接的RESTful API,增加了一个非常有趣的开发PHP API类我使得以直接执行其他PHP类控制器方法的方式对AJAX进行解释和处理(路由).

我在这个Symfony 2应用程序(fosjsrouter)中使用了很多ajax来处理路由.因此,SPA点击事件不是触发路由和动作的URL,而是将AJAX触发到后端路由器,具有大的JSON有效负载,不限于PHP控制参数(类/方法/ var名称)和数据集.

好的,所以回到正轨; 鉴于上述情况; 在路由器的JS类对象端,我认为这是向它添加一些JS History API功能的最佳位置,(状态,后退按钮等)

如果调用了一个history标志,则可以调用上述类,该标志可能负责分配初始状态数据.首先,这是因为在这个JS方法中存在的JSON数据对象已经包含了很多关键的路由数据,以及后端PHP中需要的那条路由的param信息,它来自注释.

所以我的想法是,如果我将历史状态标题和URL的可访问性添加到注释中,那么我将可以访问那些可用于定义初始状态的信息,如果已标记,则ajax.done()在该主要JS路由方法中的an 内部.

现在我们可以在db和实时客户端异步之间来回传递状态两种方式.您可以使用前端的观察者或任何内容,以及后端的作业/队列,以使其完全被动.(也使用React :-))

编辑我不太确定这就是我的想法,看起来它让我在PHP函数的return语句中设置了这个title和的值url,我希望它在注释中设置(参见返回'Matthias Noback';)

所以我正在尝试这个,但我在哪里设置这些标题？

    <?php

namespace Blah\CoreBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

/**
 * @Annotation
 */
class HistoryAnnotationController
{

    //history state params are out properties here..
    /**
     * @var
     */
    private $url;

    /**
     * @var
     */
    private $title;


    /**
     *
     */ …

我需要使用History API来处理应用程序.我的问题是一些"home"jQuery插件已经为popstate实现了一个事件

一个独特的视图可以有多个popstate事件？

我正在使用history.pushState更新URL，如下所示：

var state = {url: newLocation};
window.history.pushState(state, pagetitle, newLocation);    

在移动 Chrome 上，网页 URL（在 URL 栏上）和标题确实会按预期更新。但是，当单击 Chrome 菜单上的“共享...”按钮时，旧的 URL（调用 History.pushState 之前）将被共享。我是否遗漏了什么以及如何修复它？谢谢！

我使用 HTML5 历史 API 来修改 URL，因为选择了某些产品属性（例如绿色汽车、蓝色汽车）以允许深层链接共享。

但是，这不是单页应用程序，所以我不想劫持用户的后退按钮：如果他们按后退，我想让他们转到上一页，而不是以前的汽车颜色。

实现这一目标的最佳方法是什么？

历史示例：

/page1
/page2
/page2?color=green
/page2?color=red
/page2?color=blue

然后按浏览器的后退按钮返回/page1