标签: browser-history

我正在尝试使用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 …

我使用History包将无效的URL重定向到我的react组件上的404页面.

我使用.replace而.push不仅仅是因为我不希望浏览器记录我访问过的任何无效网址.

我错过了这一点吗？在为我的目的选择一个或另一个之间是否需要权衡？

有人可以向我解释一下吗？提前致谢 ;)

此代码在FF中运行良好,它会将用户带回上一页,但不会在Chrome中:

<a href="www.mypage.com" onclick="javascript:history.go(-1)"> Link </a>

有什么问题？

众所周知,在XHR(又名AJAX)Web应用程序中,没有为您的应用程序构建历史记录,单击刷新按钮通常会将用户移出他/她当前的活动.我偶然发现了location.hash(例如http://anywhere/index.html#somehashvalue)来规避刷新问题(使用location.hash通知你的应用程序它的当前状态并使用页面加载处理程序来重置该状态).这真的很好很简单.

这让我想到使用location.hash来跟踪我的应用程序的历史记录.我不想使用现有的库,因为它们使用iframe等.所以这是我的镍和硬币:当应用程序页面加载时我开始这样:

setInterval(
       function(){
           if (location.hash !== appCache.currentHash) {
               appCache.currentHash = location.hash;
               appCache.history.push(location.hash);
               /* ... [load state using the hash value] ... */
               return true;
           }
           return false;
       }, 250
 );

(appCache是包含应用程序变量的预定义对象)想法是从哈希值触发应用程序中的每个操作.在体面的浏览器中,哈希值更改会在历史记录中添加一个条目,在IE(<= 7)中则不会.在所有浏览器中,向后或向前导航到具有其他哈希值的页面不会触发页面刷新.这就是间隔函数接管的地方.每次检测到哈希值更改(通过编程方式,或通过单击后退或前进)时,应用程序都可以采取适当的操作.应用程序可以跟踪它自己的历史记录,我应该能够在应用程序中显示历史记录按钮(特别是对于IE用户).

据我所知,这可以跨浏览器工作,并且在内存或处理器资源方面没有任何成本.所以我的问题是:这是否是管理XHR-apps历史的可行解决方案？优缺点都有什么？

更新:因为我使用我的自制框架,我不想使用现有的框架之一.为了能够在IE中使用location.hash并将其包含在历史中,我创建了一个简单的脚本(是的,它需要一个iframe),这可能对你有用.我在我的网站上发布它,随意使用/修改/批评它.

我正在做一个简单的项目,让我们采取高度安全的网站.我有5个不同的JSP页面.如果我从第一个JSP页面开始,它将重定向到第二个JSP页面,依此类推.同时,它不应该在我的浏览器历史记录中存储这些页面.如何使用JavaScript清除那些浏览历史记录？

我有一个$(document).ready()用于构建界面的网页.然后用户可以转到子页面,并返回到原始页面,他可以按下浏览器的"上一个"按钮或页面中的"返回"按钮,触发一个history.back();.返回原始页面,$(document).ready()未触发,因此页面缺少信息.

有没有办法自动触发它,就好像它是一个"真正的负载"？

谢谢!

编辑

在其中发出警报,警报已加速,但我的界面中缺少东西,就好像缺少一些准备事件的部分一样.调查...

编辑2

hahahahaha in document.ready我click有些复选框应该是未经检查的.当我在这个页面上"退回"时,它们会被检查,因此我们会对它们进行检查click.

对不起,这完全是我的坏事:(

基本上,我有一个包含表单的页面.当用户提交该表单时,将调用Javscript函数并向用户动态显示新表单.

此时,我希望用户能够单击浏览器的后退按钮并返回到第一个表单.这可能吗？

感谢您的快速回复,但我无法让pushState工作.单击后退按钮后,HTML仍显示"第二个表单".

这是我用来测试它的代码:

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>

我在这里有这个代码:

<script type="text/javascript">
function goFunction(){
  history.pushState("google.ca", "GOOGLE CANADA", "http://www.google.ca");
  return event.preventDefault();
}
</script>

和

<a href="#" onclick="javascript:goFunction();">GO</a>

当我点击我的链接时,我在错误日志中收到此错误:

 Uncaught SecurityError: A history state object with URL 'http://www.google.ca/' cannot be created in a document with origin 'http://cowelllaserhair.com'. 

你可以在http://cowelllaserhair.com/test.html看到这个

我究竟做错了什么？

我需要参考一下吗？

谢谢,J

当我们的React 16代码库中出现错误时,它会被我们的顶级错误边界捕获.ErrorBoundary发生这种情况时,组件会愉快地呈现错误页面.

ErrorBoundary所在的位置

   return (
     <Provider store={configureStore()}>
       <ErrorBoundary>
         <Router history={browserHistory}>{routes}</Router>
       </ErrorBoundary>
     </Provider>
   )

但是,使用浏览器后退按钮(单击一次)导航回来时,URL会在地址中更改,但页面不会更新.

我已经尝试将错误边界向下移动到组件树,但此问题仍然存在.

关于这个问题在哪里的任何线索？

有一些不同的jQuery历史插件有一个比其他任何更好...

我正在尝试决定使用哪一个,任何想法或其他任何尝试:

• http://www.balupton.com/projects/jquery-history
• http://tkyk.github.com/jquery-history-plugin
• http://plugins.jquery.com/project/history