Archief - #! in urls?

wdelements · 15 dec 2010

Weer iemand wat precies de bedoeling is van #! in urls?
Ik heb dit nu al bij facebook en twitter gezien.

Code:

http://twitter.com/#!/messages
http://www.facebook.com/#!/?sk=messages

Ik weet dat je anchors kan gebruiken, maar dan refresht je pagina niet, maar ga je gewoon naar een ander deel van je pagina, maar hier wordt het blijkbaar echt gebruikt om te navigeren naar een andere pagina? Aangezien je ziet dat de volledige pagina in de browser refresht gebeurt er dus echt wel het laden van een nieuwe pagina.

scipicore · 15 dec 2010

Bij mij staat er toch gewoon

Code:

http://www.facebook.com/?sk=messages

hoor...

*edit* Bij twitter staat het er wel..vreemd.

Wolfr · 15 dec 2010

Dit dient om de pagina's te laten refreshen dmv. een javascript call
Unique URLs - Ajax Patterns

Slicer · 15 dec 2010

Dit wijst op javascript generated content. Alles na #! wordt door javascript geparsed om dan de juiste html te genereren. Dit zorgt ervoor dat je pagina's in ajax based websites kunt bookmarken (en de back en forward arrow zullen werken hoewel je hiermee ook rekening moet houden dat je de pagina dan moet herbouwen).

Het patroon #! maakt ook deel uit van een standaard om AJAX based websites indexeerbaar te maken. Alles achter de #! wordt door de indexeerbot meegegeven als _escaped_fragment_ parameter, de pagina hoort dan server-side gegenereerd te worden zodat het toch geindexeerd kan worden.

Meer uitleg over deze standaard: Learn More - Making AJAX Applications Crawlable - Google Code

Een voorbeeld:
- ajax based pagina: http://gwt.google.com/samples/Showcase/Showcase.html#!CwBasicButton
- zelfde pagina indexeerbaar: Showcase of Features: Basic Button

Bekijk de source van beide pagina's om het verschil te zien

wdelements · 16 dec 2010

ok bedankt voor de uitleg, ik snap alleen niet goed het principe van _escaped_fragment_

als je bijvoorbeeld dit hebt: http://www.website.com#!tab0&q=Octopus+spotting
hoe krijg jedan die #!tab0&q=Octopus+spotting eruit?

want ik veronderstel dat je met javascript die hash moet gaan omzetten in een gewone url met parameters?

Slicer · 16 dec 2010

_escaped_fragment_ dient om de pagina's indexeerbaar te maken door google. Als deze parameter wordt meegegeven moet je de pagina zelf genereren aan server side ipv op javascript te rekenen om het te genereren (google indexeer bot ondersteund geen javascript)

Bekijk de broncode van beide pagina's maar eens, hoewel het resultaat hetzelfde is zit er een groot verschil op.

Om het request te verwerken moet je gewoon een substring nemen: window.location.href.substring(window.location.href.indexOf('#!'));

Je moet natuurlijk zelf de nodige code voorzien die reageert op het resultaat (en click handler op body om navigatie af te handelen)

wdelements · 17 dec 2010

ok, maar die _escaped_fragment_ is toch een synoniem voor #! he?
Want ik ben al urls tegengekomen waar dit echt letterlijk in stond ipv #!, maar dat is toch nooit de bedoeling he?

Ik heb een voorbeeldscriptje in elkaar gestoken, is dit goed geïnterpreteerd?

voorbeeld url: http://localhost/hash/#!dogs

Code:

<html>
<head>
<script type="text/javascript">
var hash = false;

function checkHash(){ 
    if(window.location.hash != hash) { 
        hash = window.location.hash; 
        processHash(hash); 
    } t=setTimeout("checkHash()",400); 
}

function processHash(hash){
    //var includeLoc = window.location.href.substring(window.location.href.indexOf('#!') + 2) + ".html";
    var includeLoc = hash.substring(hash.indexOf('#!') + 2) + ".html";
    document.getElementById('ifrm').src = includeLoc;
}
</script>
</head>
<body onload="checkHash();">
<a href="#!cats">cats</a>&nbsp;&nbsp;<a href="#!dogs">dogs</a>
<br /><br />
<iframe id="ifrm" name="ifrm" src="initial.html" scrolling="auto" width="80%" height="160" frameborder="1">
 [geen iframes ondersteund]
</iframe>
</body>
</html>

wdelements · 17 feb 2011

Het is even geleden hier, maar ik ben momenteel begonnen met een projectje waar ik graag deze werkwijze in wil implementeren, maar nu zit ik toch nog met enkele vragen.

Ik heb begrepen dat #! dient om urls volledig indexeerbaar te maken door zoekmachines.

Nu vraag ik mij echter af waarom ik overal zie dat dit met ajax te maken heeft?

Als ik op facebook

Code:

http://www.facebook.com/home.php#!/?sk=ff&ap=1

en dan de url verander door naar

Code:

http://www.facebook.com/home.php#!/?sk=events

te gaan, dan zie ik weldegelijk onderaan firefox de laadbar laden.
Dus geen ajax, wat ik ook nergens in mijn script gebruik.

Als ik mijn eigen scriptje (in de post hierboven) test wordt de pagina precies ook geladen, maar mijn scriptje lijkt me goed geïnterpreteerd?

Drone · 17 feb 2011

BBQ is daar een goede jQuery plugin voor. Heeft ook veel unittests dus zelf al gebruik je de plugin niet kan je nog altijd eens wat door de source browsen.

wdelements · 18 feb 2011

Het gebruik op zich snap ik wel, als ik in mijn functie "processHash" de volgende code plaats:

Code:

document.title = 'The hash is ' + hash.substring(hash.indexOf('#!') + 2);

plaats dan zie ik de title bijvoorbeeld ook veranderen.

Maar door deze code

Code:

document.getElementById('ifrm').src = includeLoc;

dus een andere pagina in de iframe laden als de hash verandert zie ik dat de laadbar van firefox even verspringt, dus neem ik aan dat de pagina toch herladen wordt?
Ik vraag me dus gewoon af wat dat met ajax te maken heeft?

Archief - #! in urls?

wdelements

Legacy Member

scipicore

Legacy Member

Wolfr

Legacy Member

Slicer

Legacy Member

wdelements

Legacy Member

Slicer

Legacy Member

wdelements

Legacy Member

wdelements

Legacy Member

Drone

Legacy Member

wdelements

Legacy Member