Question

我的代码有问题，我使用Html 5历史记录，并且在获取内容和更改网址时工作得很好但是当我刷新页面时，它只显示没有带css的完整页面的内容，这里是我的代码：

<script type="text/javascript">

        $(function() {
            $('.menuAnchor').click(function(e) {                
                href = $(this).attr("href");                
                loadContent(href);                  
                // HISTORY.PUSHSTATE
                history.pushState('', 'New URL: '+href, href);
                e.preventDefault();                                 
            });

            // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
            window.onpopstate = function(event) {                   
                console.log("pathname: "+location.pathname);
                loadContent(location.pathname);
            };    
        });

        function loadContent(url){
            // USES JQUERY TO LOAD THE CONTENT
             $.get(url, {}, function (data) {
                $(".contn_btm_mid_bg").html(data);
                //$.validator.unobtrusive.parse(".contn_btm_mid_bg");
            });

            // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
            $('li').removeClass('current');
            $('a[href="'+url+'"]').parent().addClass('current');                
        }

    </script>

Answer 1

我使用history.js使用ajax更改我的网址，它对我来说很好用。如果您在文档中将CSS链接起来，则CSS不应该真正改变。你在覆盖它吗？在您正在执行ajax调用的页面的头部声明您的DIV并在ajax上加载仅更新CSS或具有ajax调用内容的任何元素。我使用这个插件做到这一点，它对我很有用。即使页面刷新，我的<html> <head> <link rel="stylesheet" type="text/css" href=" linktoyourfile.css" media="screen">  </head> <body> <div class="contn_btm_mid_bg"></div> </body> </html>也始终存在。

 function loadContent(url){
            // USES JQUERY TO LOAD THE CONTENT
             $.get(url, {}, function (data) {
                $(".contn_btm_mid_bg").html($(data).find('.contn_btm_mid_bg').html());
                //$.validator.unobtrusive.parse(".contn_btm_mid_bg");
            });

            // THESE TWO LINES JUST MAKE SURE THAT THE NAV BAR REFLECTS THE CURRENT URL
            $('li').removeClass('current');
            $('a[href="'+url+'"]').parent().addClass('current');                
        }

编辑：

由于我无法看到您的HTML或结构，因此我会根据您的评论告诉您如何执行此操作。

不要打电话给整个页面。只需通过ajax调用包含要导入的内容的div。不是整页。将CSS链接到标题中包含的所有页面上。然后使用DIV来保存内容，当您调用该页面时，只需调用DIV的ID而不是整个页面。示例

您的其他页面：

然后在你的ajax调用中，如果你的div在所有页面中都有相同的类，你可以在下面执行此操作。确保您也在其他页面中链接CSS。

{{1}}

解决HTML5历史记录中的页面重新加载问题

1 个答案: