Get entire page into container and hide/show it without reloading

Question

I want to load full pages somewhere into DOM and keep them inside its own "containers" for showing and hiding.

So far i tried:
1) Loading page into div but some things like background image and css are getting out of the "container" even if its hidden like this:

    $("#page" + index).hide().load(url);

2) If i will load it into :

    $("#page" + index).html('<object data="' + url + '">');

it keeps page inside of container but when i use jQuery show/hide it reloads every time.

I haven't tried iframes but with the framebreakers i guess some page would take over the screen.

Do you have any idea how to do it?

Answer 1

Does the url you're loading contain an extra set of html, head or body tags? Html documents should only contain one set of these.

Answer 2

You probably don't want to load entire documents (with all header/body information etc), into elements of another document; thats going to be difficult to work with.

You could use jQuery.load with the a filter to only load elements of a certain class, i.e. put one big div around the content that you actually want to pull in, and then use that to filter to jquery load.

Loading Page Fragments

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.

We could modify the example above to use only part of the document that is fetched:

$( "#result" ).load( "ajax/test.html #container" ); When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as , , or elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.

From here:

http://api.jquery.com/load/