标签: browser-history

在OSS Web应用程序中,我们有JS代码执行一些Ajax更新(使用jQuery,不相关).页面更新后,将调用html5历史记录界面History.pushState,代码如下:

var updateHistory = function(url) {
    var context = { state:1, rand:Math.random() };
    /* -----> bedfore the problem call <------- */
    History.pushState( context, "Questions", url );
    /* -----> after the problem call <------- */
    setTimeout(function (){
        /* HACK: For some weird reson, sometimes something overrides the above pushState so we re-aplly it
                 This might be caused by some other JS plugin.
                 The delay of 10msec allows the other plugin to override the URL.
        */
        History.replaceState( context, "Questions", …

作为用户,我想通过深度网址上的direkt访问内容

情况

在主页面上,我有一个指向"关于"页面的链接.单击内容按预期更改.页面被加载,网址更改为localhost:8080/about.

如果我现在刷新页面我得到错误:

无法获得/关于

我想知道这是正常的行为还是我错过了什么？

路线:

var React = require('react');
var ReactRouter = require('react-router');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');

module.exports = (
  <Router history={browserHistory} >
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
)

主要:

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

module.exports = React.createClass({
  render: function() {
    return <div>
      <div>Header!!</div>
      {this.content()}
    </div>
  },
  content: function() {
    if(this.props.children) { …

切换到路由器v4和历史v4.5.1,现在历史监听器无法正常工作

import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory()

history.listen((location, action) => {
  console.log(action, location.pathname, location.state)  //  <=== Never happens
})

render(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root')
)

有什么想法被忽略的想法？

是否可以使用JavaScript更改浏览器的URL,但不能离开页面？

有没有办法访问历史记录,以便我知道用户点击后退按钮(调用WebView.goBack())时访问的URL？

当我通过javascript/jquery异步加载页面时,我一直在使用历史API.我想知道如何告诉浏览器该网站正在加载,以便浏览器可以显示加载图片(如firefox中的旋转轮).

编辑:

更具体:

如果我在我的网站上加载页面,网址会更改,则会显示新内容,但Firefox不会将旋转轮显示为信号,即页面正在加载.

如果我在Facebook的时间轴上打开图片,图片正在加载,网址会更改,Firefox会显示要显示的旋转轮,图像正在后台加载.

我也想要那个纺车!

我最近通过阅读一本书开始学习Backbonejs.我觉得这个问题有点混乱.这是一个路由器:

define(['views/index', 'views/login'], function(indexView, loginView) {

    var SelinkRouter = Backbone.Router.extend({

        currentView: null,

        routes: {
            'home': 'home',
            'login': 'login'
        },

        changeView: function(view) {
            if(null != this.currentView)
                this.currentView.undelegateEvents();
            this.currentView = view;
            this.currentView.render();
        },

        home: function() {
            this.changeView(indexView);
        },

        login: function() {
            this.changeView(loginView);
        }
    });

    return new SelinkRouter();
});

这是应用程序的启动方法:

define(['router'], function(router) {

    var initialize = function() {
        // Require home page from server
        $.ajax({
            url: '/home',          // page url
            type: 'GET',           // method is get
            dataType: 'json',      // use json format
            success: …

当浏览AngularJS的开发人员指南时,我注意到当使用后退按钮导航回页面时,我不会回到上一个滚动位置.相反,我回到了顶端.由于开发人员指南是使用AngularJS构建的,我担心,当我使用AngularJS构建自己的Web应用程序时,如果他们有相同的体验,它会使我的用户烦恼.为什么会发生这种情况,如何解决？我是否需要以某种方式使用HTML5的历史记录API？

转到开发人员指南并亲自查看此行为:http://docs.angularjs.org/guide/directive

我通过传递 createBrowserHistory prop 将 React 应用程序包装在 Router 中。但是获取“类型‘IntrinsicAttributes & RouterPops’上不存在属性‘历史记录’”

这是我的index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Router } from "react-router-dom";
import history from "../src/utils/history";

ReactDOM.render(
    <Router history={history}>
    <App />
  </Router>,
  document.getElementById("root")
);

这是我的历史记录.tsx

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

我正在使用react-router-dom v6.0.2

有没有办法在javascript中循环"历史"对象以查找历史记录中的特定页面？