Лучший способ заменить iframes из приложения

Question

Итак, я переписываю пользовательский интерфейс для приложения, которое в настоящее время загружает все фактическое содержимое страницы с помощью iframes и просто имеет оболочку вокруг него, содержащую меню и другую информацию.

Мой вопрос - лучший способ заменить эти фреймы и сохранить функциональность браузера (назад/вперед).

Somethings ив думал о:

• Расширение базового шаблона (это, кажется, как хороший метод, но некоторые из страницы написаны на разных языках шаблонных так будет много работы)

• Загрузка с помощью JQuery (Я пытаюсь сделать это с помощью .load() метод но, кажется, история браузера сложнее, чем я думал)

===== Обновление =======

Так что я пытаюсь использовать JQuery барбекю и 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'); 
       }); 
      } 

So FrameSource - это переменная jinja, которая устанавливается через аргумент в url p. Он читается правильно при загрузке страницы, но когда я пытаюсь щелкнуть ссылку, ничего не происходит.

Пример Ссылка

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

Console Ошибка

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' 

Got кнопку назад, чтобы работать без каких-либо плагин, но не вперед:

изменилось:

$.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). Вы также должны иметь возможность загружать правильный контент, когда изменяется хэш-тег, следовательно, плагин.

Я лично использовал этот метод с успехом. Требуется немного работы, чтобы заставить его работать бесперебойно, но он выполняет эту работу.