如何从另一个页面加载 div 的内部 html？答案

【问题标题】：How to load inner html of div from another page?如何从另一个页面加载 div 的内部 html？
【发布时间】：2017-07-17 22:10:48
【问题描述】：

我目前正在开发一个网站，在该网站上，导航栏链接可以无缝地引导到另一个页面，并且无需加载即可淡入淡出过渡。

点击链接时，包含主页内容和页脚的div#page 块将淡出、清空，然后淡入点击链接的href 的内容。但是，如下所示，我当前的代码将整个页面的 html（包括 head 内容）放在 div#page 上，而不仅仅是 div#page 的内部 HTML。

$("#header .menu a, #header .logo").click(function() {
    var href = $(this).attr("href");
    var title = $(this).attr("title");

    history.pushState(null, title, href);

    $("#page").fadeOut("slow", function() {
        $("#page").delay(1000).empty();
    });

    $("#page").load(href + "#page", function() {
        $("#page").fadeIn();
    });

    return false;
});

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

来自docs

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法来实现的。如果字符串中包含一个或多个空格字符，则字符串中第一个空格之后的部分被假定为确定要加载的内容的 jQuery 选择器。

所以试着像这样添加一个空格

$("#page").load(href + " #page", function() { //White space before #page
    $("#page").fadeIn();
});

PS：我没有测试过这段代码。

【讨论】：

是的，这可能就是它区分显示完整内容还是部分内容的方式。
我不知道。比我的回答更轻松。

【解决方案2】：

两种选择：

推荐的方法是创建一个返回仅限内部 HTML。

像这样解析响应（示例）：

var $dom = $('<div />');
$dom.html(response);
var $content = $dom.find('#id'); // #id is your inner content id

现在您应该可以使用$content.html() 插入内部内容了。

【讨论】：