I'm re-writing a website for my father's driving school, changing the unnecessary iframes and images to html5 and css3 markup, and improving the functionality trough javascript and jquery.
Now, I have a full page for every menu-item (for the search crawlers), while the header and the menu mostly stay the same. That's why I want to use the history api and change the content and the document title and description when a link gets clicked on a device with javascript enabled, so there doesn't have to be a full page refresh.
What works: - getting the #content div of the target page and loading it into the current page - using the history api to show a new url and the popstate event to return to previous states - changing the content of the html head from the current document
What doesn't work: - getting the html head from the target document
There should be a simple function for this, right? Or a good way to do this?
Since it's on the same origin, you can do that. It's a bit awkward, though it's not a million miles off what jQuery does behind-the-scenes when you use its ajax load (I expect jQuery uses a document fragment rather than an iframe).
Basically, you can create an off-page iframe, load the content page into there, and then extract whatever you need from it, something like this (completely unoptimized):
// I'm assuming you have a variable containing the content URL; I'll use `page`
var page = "/ocazuc/2";
// Create the iframe, put it off-page, and put it in the DOM
var iframe = $('<iframe>');
iframe.css({
position: "absolute",
left: -10000
}).appendTo(document.body);
// Hook the load event on it
iframe.load(function() {
// Get the document
var $doc = $(iframe[0].contentDocument.documentElement);
// Steal its content
$doc.find("body").contents().appendTo(document.body);
// And use its title or whatever else you want from the `head`
document.title = $doc.find('title').text();
// Done with it
iframe.remove();
});
// Start loading it
iframe[0].src = page;