Geek Answers Handbook

Simulate frames using jQuery load () and pushState ()

tl; dr summary : jQuery load()method is called like:

$('#foo').load('similar.html #foo')

leads to a DOM structure:

<div id="foo">
  <div id="foo">…</div>
</div>

What is the right way to swap part of a page with an equivalent part on a similar page using jQuery that doesn't double the wrapper?

I want to create a website that:

  • Contains a permanent "chrome" site around all pages (heading, navigation bar, search box, etc.).
  • Collapses the "content" of the site during navigation (all chrome is permanent).
  • Provides the ability to view the history and bookmarks of standard viewing.

enter image description here

- # 3, , , ( ).

, , :

<html><head><title>NAME</title>…</head><body>
  <div id="chrome">…</div>
  <div id="content">…</div>
</body></html>

jQuery, AJAX . history.pushState(), :

$('#nav a').click(function(e){
  var url = this.href;
  $('#content').load(url+" #content",function(html){
    var title = /<title>(.+?)<\/title>/i.exec(html)[1];
    history.pushState({},title,url);
    $('title').html(title);
  });
  e.preventDefault();
});

; .

, , DOM :

<div id="content">
  <div id="content">contents from other page</div>
</div>

id, ...

<div id="content-wrap"><div id="content">…</div></div>

JS -...

$('#content-wrap').load(url+" #content",…);
+5
1

.load(), ( .html()), $.get() , innerHTML :

$.get('similar.html', function (serverResponse) {
    var filter = $(serverResponse).filter('#foo').html();
    $('#foo').html(filter);
});

: http://jsfiddle.net/QRBaw/

.children().parent(), #foo, .filter() ( , ).

UN-

.load(), #foo?

$('#foo').load('similar.html #foo>*');
+2

More articles:


All Articles