Javascript Girl
  1. Javascript Girl
  3. Gardez div ouvert par les modifications de page?
Intereting Posts
Comment charger les polices google dans des applications chrome emballées sans téléchargement? Faire une toile infinie ReferenceError: impossible de trouver une variable: $ <Embed> ou <objet> marqueur gestionnaire d'erreur de lecture vidéo – JavaScript Pourquoi IE restreint-t-il les fichiers JavaScript des pages HTML locales? Scripting SVG D3.js Taille automatique de la police en fonction des noeuds rayon / diamètre individuel Webpack utilisant node_modules dans le morceau de fournisseur sans les énoncer explicitement Quels sont les avantages et les inconvénients d'utiliser les extesions spécifiques au fournisseur, qui ne sont pas inclus dans les spécifications du W3C? Appeler une fonction asynchrone dans un rappel Google indique les directions et la zone près de l'itinéraire Graphique étrange maxi x valeur d'axe (Real Challenge) Comment déclencher les événements OnClick et OnClientClick simultanément dans ASP.NET lors de l'utilisation de jQuery? Différentes façons d'accéder aux valeurs d'attributs à l'aide de javascript Est-ce que le contexte d'exécution global initial a été éliminé de la pile d'appels en JavaScript?

Gardez div ouvert par les modifications de page?

J'ai essayé d'avoir un div "footer" rester au bas de la page, et de rester ouvert grâce aux changements de page. Je l'ai réalisé en utilisant la fonction .load de JQuery sur un div. De contenu principal, cependant, en utilisant cette méthode, lorsque quelqu'un va dans une page différente, l'URL reste la même. Existe-t-il un moyen de garder les liens en changeant l'URL, mais garder la div ouverte? Je prévois de jouer de la musique à travers ladite div, de sorte qu'il ne peut pas fermer entre les commutateurs de page, ou la musique s'arrête / doit refaire.

Vous pouvez le faire avec HTML5 en utilisant: 

window.history.pushState(obj, "Title", url);

Après votre appel .load() .

Cela changera l'URL affichée pour correspondre à celle de l'appel, mais seules les URL appartenant au même domaine sont autorisées.

Voir https://developer.mozilla.org/fr/DOM/Manipulating_the_browser_history

Vous devrez utiliser des cadres et des URL de hash si vous souhaitez prendre en charge les navigateurs non HTML5. J'utiliserais un jeu de cadres à l'ancienne. (Je ne peux pas croire que je suggère un jeu de cadres. Il est considéré comme une mauvaise pratique, et je n'ai pas écrit de code comme cela dans probablement 11 ans, mais dans ce cas, cela semble être la bonne solution. Vous pourriez utiliser des iframes , Mais je pense qu'un jeu de cadres en fait plus de sens.) 

 <frameset border="0" rows="*,100"> <frame src="/mainPage" id="content" /> <frame src="/footer" id="footer" /> </frameset>

Utilisez le plugin de changement de hasard de Ben Alman et utilisez un script comme celui-ci pour gérer la navigation de la page: 

 $(function () { $("frame").load(function () { document.title = w.document.title; var links = $("a[href]", this.contentWindow.document); links.attr("target", "_top"); links.click(function (e) { if (this.hostname == location.hostname) { e.preventDefault(); var path = this.pathname.replace(/^[^\/]/, "$&/"); location.hash = "#" + path + this.search + this.hash; } }); }); var w = $("#content")[0].contentWindow; $(window).hashchange(function () { var hash = location.hash.substr(1) || "/mainPage"; var contentLoc = w.location.pathname + w.location.search + w.location.hash; if (hash.toLowerCase() != contentLoc.toLowerCase()) { w.location.replace(hash); } }).trigger("hashchange"); });

Demo: http://jumpingfishes.com/framed/

En alternative aux cadres, vous pouvez utiliser AJAX pour recharger le contenu, mais les cadres peuvent être plus rapides à mettre en œuvre.