标签: html5-history

我正在研究使用HTML5 History API解决与AJAX加载内容的深层链接问题,但我正在努力开始.有没有人知道有什么好的资源？

我想使用它,因为它似乎是一种很好的方式,允许发送链接的可能性可能没有JS打开.当有人向JS发送链接给某人时,很多解决方案都会失败.

我最初的研究似乎指向JS中的History API和pushState方法.

http://html5demos.com/history

我想更换一个没有页面刷新的网址.

我需要改变:

https://example.com/en/step1

至

https://example.com/en/step2

怎么做 ？

我正在尝试为我的反应应用程序编写路由器组件.我正在创建新的react类并在componentDidMount方法中定义一些路由.这是完整的方法

componentDidMount: function () {

    var me = this;

    router.get('/', function(req){
        me.setState({
            component: <MainPage />
        });
    });

    router.get('/realty', function(req){
        me.setState({
            component: <RealtyPage />
        });
    });

    router.get('/realty/:id', function(req){
        me.setState({
            component: <RealtyPage id={req.params.id} />
        });
    });

},

当我去'/'或'/ realty'时,一切正常.但是,当我去'realty/new'时,我得到错误Uncaught SyntaxError:意外的令牌<在app.js:1中.但Chrome调试器在我的index.html中显示该错误,我甚至无法在浏览器中调试此错误.每当我使用'/'前往路线时,就会发生此错误.我试图使用其他客户端路由器,如page.js,rlite,grapnel,但都仍然相同.也许有人对这个错误有任何想法？

UPD:这是路由器组件的fuul代码.现在它使用page.js路由,我看到同样的错误

var React = require('react');
var page = require('page');


var MainPage = require('../components/MainPage');
var RealtyPage = require('../components/RealtyPage');


var Router = React.createClass({

    getInitialState: function(){
        return {
            component: <RealtyPage />
        }
    },

    componentDidMount: function () {

        var me = this;

        page('/', function (ctx) { …

如何检查您使用的浏览器是否支持HTML5历史记录API？

正如你在这里看到的http://caniuse.com/#search=history中只有chrome + ff4和其他几个人支持这个,如果他们不支持这个,我希望做点其他事情.

如何为此检查制作某种if语句？

我刚刚在谷歌浏览器中打开了一个空白的HTML页面,其中包含一些基本标签(如html,body,head等),并尝试在控制台中执行以下命令:

history.pushState(null, 'my test title', '/test/url');

历史事件工作正常,但页面标题保持不变.可以吗？我应该每次都手动更换吗？如果我应该,为什么像title这样的pushState()方法中有这样的参数？

我知道之前已经多次询问过,但答案的描述性不足以解决我的问题.我不想更改页面的整个URL.我想&item=brand在按钮点击时追加一个参数而不刷新.

使用document.location.search += '&item=brand';使页面刷新.

使用window.location.hash = "&item=brand";append而不刷新但使用散列#来消除参数的使用/效果.我试图在追加后删除散列,但这不起作用.

这个答案和许多其他人建议使用HTML5 History API,特别是history.pushState方法,对于旧浏览器,是设置片段标识符以防止页面重新加载.但是怎么样？

假设URL是: http://example.com/search.php?lang=en

如何&item=brand使用HTML5 pushState方法或片段标识符进行追加,以便输出如下:http://example.com/search.php?lang=en&item=brand没有页面刷新？

我希望有人可以说明如何使用HTML5 pushState将参数附加到现有/当前URL.或者,如何为相同目的设置片段标识符.一个很好的教程,演示或一段代码与一点点解释将是伟大的.

演示到目前为止我所做的一切.非常感谢您的回答.

我正在为History API编写一个小程序.我正在努力解决这个问题:

$(window).bind('popstate',  
    function(event) {
        console.log('pop: ' + event.state);
    });

当我点击"上一步"按钮时,它会记录'pop:undefined'

但是,如果我这样做,事情就像预期的那样:

window.onpopstate = function(event) {
    console.log('pop: ' + event.state);
};

它这次记录'pop:[object Object]'...

所以就像jQuery没有将事件对象传递给回调.
jQuery有问题吗？或者我弄乱了什么？

我正在尝试使用ajax加载内容的HTML5历史API.

我有一堆通过相关链接连接的测试页面.我有这个JS,它处理这些链接的点击.当单击链接时,处理程序获取其href属性并将其传递给ajaxLoadPage(),该页面将所请求页面中的内容加载到当前页面的内容区域中.(我的PHP页面设置为在正常请求时返回完整的HTML页面,但只有一大块内容,如果？fragment = true附加到请求的URL.)

然后我的click处理程序调用history.pushState()以在地址栏中显示URL并将其添加到浏览器历史记录中.

$(document).ready(function(){

    var content = $('#content');

    var ajaxLoadPage = function (url) {
        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');
    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    // This mostly works - only problem is when popstate happens and state is null
    // e.g. when we try to go back …

我在React Router中使用Webpack dev服务器和browserHistory来通过HTML5 History API操作url.historyapifallback-option在我的webpack配置文件中不起作用.刷新后http://localhost:8080/users或http://localhost:8080/products我得到404.

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');

const TARGET = process.env.npm_lifecycle_event;

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'dev' || !TARGET) …

出于测试目的,我想用大量条目填充历史记录.更确切地说,我想添加X项以禁用浏览器的后退按钮,因为即使用户点击X次,他也会保持在同一页面上.

我这样做的方式如下:

(function (){
   for (var x = 0; x < 10; x++) {
     history.pushState(null, document.title, location.pathname);    
   }        
}());

因此,当页面被加载时,当前页面的10个元素被注入到历史中.此方法适用于除iOS上的Chrome以外的所有支持历史API的浏览器!

使用上面的代码,iOS上的Chrome(7到10)做了一些非常奇怪的事情:

• 它会将标签中的标题替换为当前页面的网址(因此,不会在标签标题中显示"我的精彩网页",而是显示"mygreatpage.com/samplepage1"
• 长按后退按钮检查条目,Chrome显示没有其他添加的条目 - 每个其他浏览器显示上述代码所预期的10个附加条目

Safari和其他所有iOS浏览器都可以满足我的需求.我究竟做错了什么？