History.js is organisatorisch gezien (zowel op projectleiding als codebase) een ramp. Jammergenoeg is het technisch gezien nog steeds de beste polyfill voor de HTML5 History API, en bij mijn weten de enige die significant veel moeite heeft gestoken in het omheenwerken van diverse bugs in de History API waar diverse oudere Webkit en Opera builds nog wel eens op stuk gingen.
Ajaxify is complete onzin. Content asynchroon bijladen of vervangen met bijbehorende updates and de URL structuur is iets wat je niet zinnig met een golden hammer aanpak op kunt lossen. Zo'n aanpak werkt voor triviale voorbeeldscenario's, maar voor de rest is het echt handwerk als je iets wilt wat kwalitatief goed in elkaar steekt en ook een goede user experience levert.
Daarnaast geldt ook hier dat de codebase ruk is.
Een pareltje zoals:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
| // HTML Helper
var documentHtml = function(html){
// Prepare
var result = String(html)
.replace(/<\!DOCTYPE[^>]*>/i, '')
.replace(/<(html|head|body|title|meta|script)([\s\>])/gi,'<div class="document-$1"$2')
.replace(/<\/(html|head|body|title|meta|script)\>/gi,'</div>')
;
// Return
return $.trim(result);
}; |
vertelt mij al alles wat ik moet weten. Dat soort regexes is meteen een rode vlag die prut naar de vuilnisbak gaat verwijzen. Als je een compleet HTML document wilt parsen en dankzij het gebruik van de HTML5 History API
toch al aan moderne(re) browsers vast zit; heb dan het fatsoen om DOMParser te gebruiken. Die is daar voor bedoeld:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| function parseHtmlDocument( html ) {
// Create another full HTML DOM from the input string using DOMParser.
// For browsers that don't support the "text/html" content type for DOMParser, see:
// https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension_for_other_browsers
var otherDocument = new DOMParser().parseFromString(html, "text/html");
// Extract the contents of the other document's body and transplant it into
// the current HTML DOM using innerHtml and a temporary element.
var tempNode = document.createElement("div");
tempNode.innerHTML = otherDocument.body.innerHTML;
// Grab the mass-converted DOM nodes from the temporary element and
// turn them into a simple array. Then remove their association with the
// temporary element, allowing it to be disposed of by the garbage collector.
var nodes = [].slice.call( tempNode.childNodes );
nodes.forEach( function( node ) {
tempNode.removeChild( node );
})
// Return the other document's new title and the other document's body nodes.
return {
title : otherDocument.title,
body : nodes
}
}); |
[
Voor 44% gewijzigd door
R4gnax op 05-11-2013 21:21
]
:strip_exif()/u/444482/crop628dd7e740e74_cropped.webp?f=community)
:strip_exif()/u/32979/ksw.gif?f=community)
/u/465874/mark.png?f=community)
/u/34186/crop62e07d174532d_cropped.png?f=community)
:strip_icc():strip_exif()/u/86599/crop681cb5088171b_cropped.jpg?f=community)
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
:strip_icc():strip_exif()/u/185659/daaninauto_klein.jpg?f=community)
Ook kan je de functionaliteit uitschakelen voor oude browsers.