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

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

1 голос
/ 13 марта 2012

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

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

Что-то, о чем я думал:

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

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

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

Поэтому я пытаюсь использовать jqueryBBQ и 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;

1 Ответ

1 голос
/ 13 марта 2012

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

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

...