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

因此，我正在为一个应用程序重写UI，该应用程序当前通过iframes加载所有实际页面内容，只是在其周围有一个包装器，其中包含一个菜单和一些其他信息

我的问题是，替换这些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>

获得了“后退”按钮，可以在没有插件但没有前进的情况下工作：

更改：

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

致：

---

使用jQuery/Javascript，您可以使用html5

history.pushState（）

：

但是，如果您想要更向后兼容的解决方案，您可以使用哈希标记跟踪您的历史记录，使用

hashchange

事件插件：

在这种情况下，无论何时更改“页面”，都会将哈希标记更新为唯一标识符（即

http://www.mysite.com/#page2

）。您还必须能够在散列标记更改时加载正确的内容，从而加载插件

---

我个人成功地使用了这种方法。要让它平稳运行需要一点工作，但它可以完成这项工作。

使用jQuery/Javascript，您可以使用html5

history.pushState（）

：

但是，如果您想要更向后兼容的解决方案，您可以使用哈希标记跟踪您的历史记录，使用

hashchange

事件插件：

在这种情况下，无论何时更改“页面”，都会将哈希标记更新为唯一标识符（即

http://www.mysite.com/#page2

）。您还必须能够在散列标记更改时加载正确的内容，从而加载插件

---

我个人成功地使用了这种方法。要让它平稳运行需要做一点工作，但它确实做到了。

我将使用html div标记。它们易于使用，基本上与iFrame具有相同的用途。您可以使用div替换jquery.load（）方法中的div标记的内容。答案可能是js 4！我将使用HTMLdiv标记。它们易于使用，基本上与iFrame具有相同的用途。您可以使用div替换jquery.load（）方法中的div标记的内容。答案可能是js 4！你能提供一个基于我上面添加的代码的示例吗？到目前为止，我还无法将任何hashchange示例修改到我的用例中，而且在BBQ方面也没有什么好运气烧烤也祝你好运。

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

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