Javascript 解决HTML5历史中的页面重新加载问题_Javascript_Jquery_Html

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

javascript jquery html

Javascript 解决HTML5历史中的页面重新加载问题,javascript,jquery,html,Javascript,Jquery,Html,我的代码有问题，我使用HTML5历史记录，它在获取内容和更改url方面做得很好，但当我刷新页面时，它只显示内容，没有使用css显示完整页面，我的代码如下： <script type="text/javascript"> $(function() { $('.menuAnchor').click(function(e) { href = $(this).attr("href");

我的代码有问题，我使用HTML5历史记录，它在获取内容和更改url方面做得很好，但当我刷新页面时，它只显示内容，没有使用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>


$（函数（）{
$（'.menuAnchor'）。单击（函数（e）{
href=$（this.attr（“href”）；
加载内容（href）；
//历史，国家
history.pushState（“”，“新URL:”+href，href）；
e、 预防默认值（）；
});
//此事件确保后退/前进按钮也能工作
window.onpopstate=函数（事件）{
log（“路径名：+location.pathname”）；
loadContent（location.pathname）；
};    
});
函数加载内容（url）{
//使用JQUERY加载内容
$.get（url，{}，函数（数据）{
$（“.contn_btm_mid_bg”）.html（数据）；
//$.validator.unobtrusive.parse（“.contn_btm_mid_bg”）；
});
//这两行只是确保导航栏反映当前URL
$（'li'）.removeClass（'current'）；
$（'a[href=“”+url+“]”）。parent（）.addClass（'current'）；
}

我使用ajax更改我的URL，它对我来说很好。如果您的

CSS

链接到文档中，那么它实际上不应该改变。你在覆盖它吗？在正在进行ajax调用的页面头部声明您的

CSS

，并在ajax加载时仅使用ajax调用的内容更新

DIV

或任何元素。我用这个插件做到了这一点，它对我来说非常有用。我的

CSS

即使在页面刷新时也始终存在

<html>
<head>
<link rel="stylesheet" type="text/css" href=" linktoyourfile.css" media="screen"> 
<!--js files etc -->
</head>
<body>
<div class="contn_btm_mid_bg"><!--ajax contents--></div>
</body>
</html>

在ajax调用中是否包含CSS？或者你的css是如何加载的？我在索引页面中调用ajax，该页面包含一个菜单，当点击菜单中的链接时，它在同一页面中的一个div中打开，url将其状态更改为名为的页面。你可以显示你的索引页面的内容吗？首先调用外部css文件，然后脚本，然后包括包含链接的左侧栏，我在div是指推送其他页面，但其他页面只包含div和内容，没有css，当我称之为div时，它看起来很好。这些“其他”页面是指同一个文档还是实际不同的html文件中的引用？如果它们是不同的html文件，你也需要在这些文件中链接到你的CSS。我的页面实际上与你提到的逻辑相同，我使用Html5历史打开了另一个页面，脚本可以很好地从页面中获取内容，状态向后和向前也可以很好地工作，但当我刷新页面时，它会显示内容页面加载的其他页面也需要在这些页面中引用CSS。当您将ajax调用到包含CSS引用的页面中时，它将正确显示。但是，如果您刷新由ajax拉入的页面，它将不会定义CSS。试着在你的其他页面中添加一个指向CSS文件的链接，看看会发生什么。好的，我确信CSS会起作用，但是其他包含的页面，它们是标题页和左侧工具栏页，如果我将它们包含在调用的页面中，它们将与内容一起出现。我希望页面以与外观相同的状态重新加载，页眉页面和左侧栏页面以及页面和页脚中的当前内容将是相同的，不要在没有其他包含页面的情况下仅显示内容我的朋友，正如你所知，当我们调用一个页面时，url会将其状态从大小写更改为另一个，例如：mydomain/index.php这是主页，我调用了page contactus.php，其中包括带有css的表单和保存到数据库的代码，不包括标题页和左侧栏页。url的状态将更改为mydomain/contactus.php，请记住我在index.php中调用了它，它看起来非常好，但是当我重新加载url:mydomain/contactus.php时，它会显示表单元素，并且不会显示head和leftsidebar菜单。

 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');                
        }