Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal,
Gostaria de saber como faço este tipo de links (index.html?id=home), a carregar com ajax e com a função do botão voltar atrás.
Alguém tem uma ideia?
-----------------------------------------------------------------------------------
Post Mesclado
-----------------------------------------------------------------------------------
Bem pessoal já consegui mais ao menos o que queria
Exemplo: http://www.nawebti.net/demos/yui/index.html
O problema é que o menu está dentro do JavaScript ( document.write( ... etc - linha 146).
Não dá para colocar isto no html?
silverfox, eu sei que não dá erro.O problema é que o menu está dentro do javascript. E eu queria colocá-lo dentro do html.Alguma solução?
o isso não é dificil você mesmo pode fazer isso a não ser que seu conhecimento em javascript seja ZERO
é só você buscar dentro da script a parte HTML
tipo algo que "imprima" HTML tipo document.write()
... mas vo quebrar seu galho
JS
//------------------------------------------------------------------------// IMPORTANT NOTE:// This example is different from the corresponding tutorial and is not// to be copied as is. The tutorial is the reference. This example was// "html-ified" so that it does not require PHP or any other server side// technology that people don't necessarily have installed.//------------------------------------------------------------------------if ( location.protocol.substr( 0, 4 ) == "file" ) { document.write( 'This example uses the XmlHttpRequest object and cannot be run locally.' + 'You must copy it to a web server and access it using HTTP.' );} else { // The initial section will be chosen in the following order: // // URL fragment identifier (it will be there if the user previously // bookmarked the application in a specific state) // // or // "section" URL parameter (it will be there if the user accessed // the site from a search engine result, or did not have scripting // enabled when the application was bookmarked in a specific state) // // or // // "home" (default) var bookmarkedSection = YAHOO.util.History.getBookmarkedState( "app" ); var querySection = YAHOO.util.History.getQueryStringParameter( "section" ); var initSection = bookmarkedSection || querySection || "home"; // Register our only module. Module registration MUST take // place before calling YAHOO.util.History.initialize. YAHOO.util.History.register( "app", initSection, function( state ) { // This is called after calling YAHOO.util.History.navigate, or after the user // has trigerred the back/forward button. We cannot discrminate between // these two situations. loadSection( state ); } ); // This function does an XHR call to load and // display the specified section in the page. function loadSection( section ) { var url = "assets/" + section + ".html"; function successHandler( obj ) { // Use the response... YAHOO.util.Dom.get( "bd" ).innerHTML = obj.responseText; } function failureHandler( obj ) { // Fallback... location.href = "?section=" + section; } YAHOO.util.Connect.asyncRequest( "GET", url, { success:successHandler, failure:failureHandler } ); } function initializeNavigationBar() { // Process links var anchors = YAHOO.util.Dom.get( "nav" ).getElementsByTagName( "a" ); for ( var i=0, len=anchors.length; i<len; i++ ) { var anchor = anchors[i]; YAHOO.util.Event.addListener( anchor, "click", function( evt ) { var href = this.getAttribute( "href" ); var section = YAHOO.util.History.getQueryStringParameter( "section", href ) || "home"; // If the Browser History Manager was not successfuly initialized, // the following call to YAHOO.util.History.navigate will throw an // exception. We need to catch it and update the UI. The only // problem is that this new state will not be added to the browser // history. // // Another solution is to make sure this is an A-grade browser. // In that case, under normal circumstances, no exception should // be thrown here. try { YAHOO.util.History.navigate( "app", section ); } catch ( e ) { loadSection( section ); } YAHOO.util.Event.preventDefault( evt ); } ); } // This is the tricky part... The window's onload handler is called when the // user comes back to your page using the back button. In this case, the // actual section that needs to be loaded corresponds to the last section // visited before leaving the page, and not the initial section. This can // be retrieved using getCurrentState: var currentSection = YAHOO.util.History.getCurrentState( "app" ); if ( location.hash.substr(1).length > 0 ) { // If the section requested in the URL fragment is different from // the section loaded in index.php, we have an unpleasant refresh // effect because we do an asynchronous XHR call. Instead of doing // a synchronous XHR call, we can fix this by erasing the initial // content of bd: if ( currentSection != querySection ) YAHOO.util.Dom.get( "bd" ).innerHTML = ""; loadSection( currentSection ); } } // Subscribe to this event before calling YAHOO.util.History.initialize, // or it may never get fired! Note that this is guaranteed to be fired // after the window's onload event. YAHOO.util.History.onLoadEvent.subscribe( function() { initializeNavigationBar(); } ); // The call to YAHOO.util.History.initialize should ALWAYS be from within // a script block located RIGHT AFTER the opening body tag (this seems to prevent // an edge case bug on IE - IE seems to sometimes forget the history when // coming back to a page, and the back - or forward button depending on the // situation - is disabled...) try { YAHOO.util.History.initialize(); } catch ( e ) { // The only exception that gets thrown here is when the browser is not A-grade. // Since scripting is enabled, we still try to provide the user with a better // experience using AJAX. The only caveat is that the browser history will not work. initializeNavigationBar(); }}HMTL:
<div id="doc"> <div id="hd"> <div id="nav"> <ul> <li class="first"><a href="?section=home">Home</a></li> <li><a href="?section=overview">Overview</a></li> <li><a href="?section=products">Products</a></li> <li><a href="?section=aboutus">About Us</a></li> <li><a href="?section=contactus">Contact Us</a></li> <li class="last"><a href="?section=news">News</a></li> </ul> </div> </div> <div id="bd"> <div id="home"> <h1>Home</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> <div id="ft">YUI Browser History Manager - Simple Navigation Bar Example</div></div>Obrigado. Tá resolvido.A questão agora é:Como faço para ao abrir o site carregar automaticamente o home.html?
ao que me parece não ocorreu nenhum errotestei pelo FF e foi normal :Pespecifique o erro melhoro que ocorre