1

因此，我正在为一个应用程序重写 UI，该应用程序当前通过 iframe 加载所有实际页面内容，并且只有一个包含菜单和其他信息的包装器。

我的问题是替换这些 iframe 并保留浏览器历史记录功能（后退/前进）的最佳方法是什么。

我一直在想的一些事情：

  • 扩展基本模板（这似乎是一个好方法，但有些页面是用不同的模板语言编写的，所以工作量很大）

  • 通过 jQuery 加载（我正在尝试使用 .load() 方法执行此操作，但似乎浏览器历史记录比我想象的要复杂）

=====更新=======

所以我正在尝试使用 jquery BBQ 和 queryparam 但我不确定我是否正确使用它不会改变 window.location

            $(function(){
                 pageLoadAnimation('{{ framesource }}');

            });

            function pageLoad(url){
                console.log(url);
                $.param.querystring(window.location.href, 'p='+url , 2);
            }
            function pageLoadAnimation(url){
                $('body').css('cursor','wait');
                $('#mainframe').html('');
                $('#page-load-wrap').slideDown();
                $('#page-load-indicator').css('width','80%');

                $.get(url,function(data){
                console.log(data);
                $('#page-load-indicator').css('width','100%');
                $('#page-load-wrap').slideUp('slow',function(){
                    $('#mainframe').html(data);
                });
                $('body').css('cursor','default');
                }); 
            }

所以 FrameSource 是一个 jinja 变量，它通过 url 中名为 p 的参数设置。它在页面加载时被正确读取，但是当我尝试单击链接时没有任何反应。

示例链接

<a onclick="pageLoad('%2Fdashboard')">Overview</a>

控制台错误

Uncaught TypeError: Object function (a,b){var d=[],e=function(h,l)  {l=c.isFunction(l)?l():l;d[d.length]=
encodeURIComponent(h)+"="+encodeURIComponent(l)};if(b===B)b=c.ajaxSettings.traditional;    if(c.isArray(a)||a.jquery)c.each(a,function(){e(this.name,this.value)});else for(var f in a)da(f,a[f],b,e);return d.join("&").replace(tb,"+")} has no method 'querystring'

让后退按钮在没有插件但没有前进的情况下工作：

改变：

  $.param.querystring(window.location.href, 'p='+url , 2);

至：

  window.location = window.location.origin+window.location.pathname+'?p='+url;
4

1 回答 1

1

使用 jQuery/Javascript，您可以使用 html5 history.pushState()：

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState%28%29.C2.A0method

但是，如果您想要更多向后兼容的解决方案，您将使用哈希标签来跟踪您的历史记录，使用hashchange事件插件：

http://benalman.com/projects/jquery-hashchange-plugin/

在这种情况下，每当您更改“页面”时，您都会将哈希标签更新为唯一标识符（即http://www.mysite.com/#page2）。当哈希标签更改时，您还必须能够加载正确的内容，因此插件。

我个人成功地使用了这种方法。让它顺利运行需要一些工作，但它确实完成了工作。

于 2012-03-13T18:06:38.637 回答