jQuery加载外部HTML文件但页面刷新后不保持静止答案

【问题标题】：jQuery loads external HTML file but does not stay still after page refreshjQuery加载外部HTML文件但页面刷新后不保持静止
【发布时间】：2013-12-19 11:13:15
【问题描述】：

我正在尝试做一些不同的事情，但不知道这是否是个好主意

我有如下导航菜单：

...
<li><a href = "#mhome">Home</a></li>
<li><a href = "#mfaq">FAQ</a></li>
<li><a href = "#mcontact">Contact</a></li>
...

我不想使用服务器端脚本，因为建立数据库连接和定义一些配置需要更多时间，并且不想为每个页面增加页面。于是我做了一个母版页index.php

在body 部分

有两个元素：

h3 元素用于显示页面标题，div 用于显示从另一个 html 源调用的内容。

...

  <div class="container">

    <h3 id="pageTitle"></h3>

    <div id="pageContent"></div>

  </div>

...

我正在使用jQuery的点击事件将页面加载到div中

$(function() {
    $("a[href^='#m']").click(
        function() {
            $("#pageTitle").text($(this).text());
            $("#pageContent").load($(this).attr("href").substring(1) + ".html"); //removing # char.
        });

});

它工作正常。但是当我按 F5 时，它会正常返回初始状态。刷新页面时如何通过引用地址栏（我可以看到例如sitename/#mfaq）来加载当前页面。

我想，首先我需要检测页面是否正在刷新，并根据地址栏上的#m****加载相应的html文件。

【问题讨论】：

stackoverflow.com/questions/2358928/…

标签： javascript php jquery html

【解决方案1】：

$(function() {
   $("a[href^='#m']").click( function(evt) {
     // ------  This should work
     // renamed parameter elem to evt like corrected in comment
     evt.preventDefault();
     $("#pageTitle").text($(this).text());
     $("#pageContent").load($(this).attr("href").substring(1) + ".html");
   });
});

【讨论】：

它可以工作，但是您选择的参数名称很奇怪。这是一个事件，而不是一个元素，所以称它为elem 是没有意义的。
这没有回答 OPs 的问题，他指定当他按下“F5”时页面刷新并且不加载由 jQuery 加载的当前 html。

【解决方案2】：

添加到您的 DOM 就绪函数：

if (window.location.hash != "") {
    $("#pageTitle").text($("a[href='"+window.location.hash+"']").text());
    $("#pageContent").load(window.location.hash.slice(1) + ".html");
}

【讨论】：

【解决方案3】：

我做了这个。它运作良好。但我不确定性能问题：

$(function() {

    var address = $(location).attr('href');
    var hash = address.lastIndexOf("#");
    var page = address.substring(hash+1);


    if (hash < 1)
    {
        $("#pageContent").load("mhome.html");
        $("#pageTitle").html("Default Page Title");
    }
    else
    {
        $("#pageContent").load(page + ".html");
        $("#pageTitle").html($("a[href='" + address.substring(hash) + "']").text());
    }

    $("a[href^='#m']").click(
            function() {                   
                $("#pageTitle").text($(this).text());
                $("#pageContent").load($(this).attr("href").substring(1) + ".html");
            });
});

【讨论】：