总结下前端 iframe 加载网页时，history API 对网页路由的影响
前端开发中，iframe 用于在当前页面内嵌入另一个 HTML 页面。在使用 iframe 加载网页时，History API 可以对网页路由产生重要影响，具体如下：
-
浏览器会话历史记录的操作：
History API允许开发者操作浏览器的会话历史记录，这意味着可以在不重新加载整个页面的情况下，对浏览器的历史堆栈进行修改1。 -
前端路由的实现：通过
History API，可以实现前端路由，即在不同的 URL 下展示不同的内容，而无需服务器端的页面跳转。这对于单页应用程序（SPA）尤为重要，因为它允许用户在不同的视图间导航而不需要页面刷新，从而提升用户体验2479。 -
状态管理：
History API提供了pushState()和replaceState()方法，允许开发者向浏览器历史中添加或替换状态，这些状态可以在页面导航时被访问和使用35。 -
事件监听：当浏览器的历史条目发生变化时，会触发
popstate事件。开发者可以监听这个事件，根据状态的变化来加载相应的内容或更新页面的显示3。 -
iframe 与 History API 的结合使用：在
iframe中加载的页面也可以利用History API来管理其自身的路由和状态。这样，即使在主页面中的iframe进行了导航，主页面也可以保持不变，同时iframe内部可以实现类似于 SPA 的体验10。 -
服务端支持：虽然
History API主要用于客户端，但为了实现客户端路由，通常也需要服务端的支持。服务端需要能够正确响应前端发出的路由请求，并提供相应的内容4。 -
会话记录数量：
History API的length属性可以返回当前窗口下的所有会话记录数量，这包括了iframe加载的页面6。 -
异步加载页面：
History API允许通过浏览器历史记录的相对位置异步加载页面，例如，可以使用go(-1)来加载上一页，或者go(1)来加载下一页8。
总结来说，History API 对于 iframe 加载的网页路由有着显著的影响，它使得开发者能够在不刷新页面的情况下，实现复杂的前端路由逻辑，提供更加流畅和丰富的用户体验。
HTML5 History API 概述1 | HTML5 History API 功能 允许操作浏览器会话历史记录，包括加载当前页面的标签页或框架中访问过的页面。 |
前端路由与后端路由的区别2 | 前端路由优势 提升用户体验，避免页面刷新，通过 AJAX 或本地存储展示页面内容，实现 SPA。 |
pushState() 方法示例3 | pushState() 方法 用于在浏览器历史记录中添加一个新的状态对象，但不会引起页面刷新。 |
replaceState() 方法与 pushState() 的区别3 | replaceState() 方法 与 pushState() 类似，但替换当前历史记录条目，而不是添加新条目。 |
popstate 事件的作用3 | popstate 事件 每当活动的历史条目发生变化时，向窗口派发 popstate 事件。 |
history 路由实现原理4 | history 路由原理 监听 URL 中的路径变化，需要客户端和服务端共同支持，实现前端路由。 |