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

Question

I'm currently working on a website where the navigation bar links would seamlessly lead to another page with fading transitions without loading.

When the links are clicked, the div#page block, which has the main page content and the footer, would fade out, empty itself, and fade back in with the content of the href of the clicked link. However, my current code, seen below, placing the html of the entire page (including the head contents) on div#page instead of just the inner HTML of div#page .

$("#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;
});

Answer 1

From the docs

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

So try adding a white-space like so

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

PS: I have not tested this code.

Answer 2

Two options:

1. The recommended way would be to create an API that would return the inner HTML only.

2. Parse the response like so (example):

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

And now you should be able to insert the inner content using $content.html() .