Should I load an entire html page with AJAX?

前端 未结 4 438
不知归路
不知归路 2020-12-16 00:48

My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and onl

4条回答
  •  Happy的楠姐
    2020-12-16 01:14

    This may be a bit strange, but I have an idea for this.

    Prepare your pages to load with an 'ifarme' GET parameter.

    • When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
    • When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'

    Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.

    Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase

    The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.

    This is just a sketch of it, but I'm sure it can be made right.

    EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.

    Example script:

    $.fn.initLinks = function() {
        $("a",this).click(function() {
            var url = $(this).attr("href");
            // transition to loading phase ...
            // Ajax post parameter tells the site lo load only the content without header/footer
            $.post(href,"ajax=1",function(data) {
                $("#content").html(data).initLinks();
                // transition to normal phase ...
            });
            return false;
        });
    };
    
    $(function() {
       $("body").initLinks();
    });
    

提交回复
热议问题