1. Analyse d'ouverture
D'accord, sans plus tarder, passons directement au sujet d'aujourd'hui. Aujourd'hui, nous parlerons principalement de « l'API d'historique » et de son rôle dans les applications monopage, et présenterons d'abord un exemple pratique comme prototype pour l'explication. Jetons un coup d'œil à « l'API Historique » :
Afin d'améliorer la vitesse de réponse des pages Web, de plus en plus de développeurs commencent à adopter des solutions d'application monopage. La structure dite d'une seule page signifie que lors du basculement entre plusieurs pages, la page actuelle entière n'est pas actualisée, les données d'affichage de la page sont mises à jour et l'URL dans la barre d'adresse est modifiée en conséquence afin que les utilisateurs puissent partager cette URL.
Si vous utilisez des navigateurs tels que Chrome ou Firefox pour accéder à des sites Web tels que "github.com, plus.google.com", vous constaterez que les clics entre les pages sont demandés de manière asynchrone via ajax,
Par la même occasion, l'URL de la page a changé. Et il peut très bien prendre en charge le navigateur en avant et en arrière. Qu'est-ce qui a une fonction si puissante ? Eh bien, cela nous amène au protagoniste d’aujourd’hui, une nouvelle API référencée en HTML5 :
"history.pushState" et "history.replaceState" sont utilisés pour modifier l'URL de la page sans actualiser via cette interface. Voyons d'abord les méthodes détaillées de l'interface "historique" :
(2), description de l'API clé
Un point à noter ici : "window.history.replaceState" est similaire à "window.history.pushState". La différence est que replaceState n'ajoutera pas de nouveau point d'enregistrement historique dans window.history et son effet est similaire. à window.location. .replace(url) n'ajoutera pas de nouveau point d'enregistrement au point d'enregistrement historique. La méthode replaceState() est particulièrement appropriée lorsque vous souhaitez mettre à jour l'objet d'état ou l'URL de l'entrée actuelle de l'historique en réponse à une action de l'utilisateur.
(3), présenter des exemples
Aujourd'hui, parlons de ce que nous faisons habituellement dans les applications d'une seule page. Il y a une liste de menus, cliquez sur les éléments de menu pertinents puis chargez dynamiquement les modules pertinents. Toutes les méthodes sont basées sur des requêtes asynchrones. La pommade est que nous constaterons que la barre d'adresse ne répondra pas aux modifications, ainsi qu'aux opérations avant et arrière dans le navigateur, ce qui n'est pas très convivial, donc afin de résoudre ce problème "Historique " entre en jeu, alors comment faire ? Ne vous précipitez pas, jetez d'abord un œil aux rendus de l'exemple, puis analysez-le étape par étape, comme indiqué ci-dessous :
Voici les données de surveillance. L'actualisation de la même URL ne provoquera pas de requêtes répétées.
Trions le processus :
La page est chargée pour la première fois. Bien que l'URL que nous avons visitée soit "http://localhost:8888/bbSPA.html", l'URL réelle est bien :
"http://localhost:8888/bbSPA.html#shanghai", "history.replaceState" a terminé le travail de changement d'URL initial et effectué le chargement initial
Pour travailler avec les données de "shanghai.data", cliquez sur n'importe quel élément de menu à gauche, le contenu à droite sera chargé par Ajax et l'URL de la page changera en conséquence, par exemple, cliquez sur Pékin .
À ce stade, nous cliquons sur le bouton Précédent de la barre d'adresse pour revenir à Shanghai et afficher le contenu. Le principe est très simple, c'est-à-dire qu'en surveillant "window.onpopstate", une commutation libre est obtenue.
D'accord ! En fait, c'est très simple. Vous pouvez l'essayer vous-même. Voici le code complet :
(1), code de pièce html
(2),Js部分代码
(四),最后总结
(1),理解History Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。
(2),两个核心Api的不同之处在哪。
(3),测试本例子的注意事项如下。
测试需要搭建一个web服务器,以http://host/的形式去访问才能生效,如果你在本地测试Fichier://这样的方式在浏览器打开,就会出现如下的问题:
因为你要pushState的url与当前页面的url必须是同源的,而file://形式打开的页面是没有origin的,所以会报这个错误。
以上就是本文的全部内容了,希望大家能够喜欢。