Question

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

我的问题是替换这些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变量，它通过名为p的url中的参数设置。它正在页面加载时正确读取，但是当我尝试单击链接时没有任何反应。

示例链接

<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;

Answer 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）。您还必须能够在哈希标记更改时加载正确的内容，因此插件。

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

从应用程序中替换iframe的最佳方法

1 个答案: