咨询WebHistoryItem中URL与Original URL的区别及示例

我来帮你把这几个概念掰明白，其实核心就是围绕重定向和历史记录的存储逻辑来的，结合实际例子一看就懂：

1. Original URL（原始URL） #

文档说明：返回此历史项的原始URL，即请求时的URL，由于加载站点时可能存在重定向，最终URL可能不同。

这个是最直观的——就是你最初主动输入、点击链接或者触发请求的那个起始URL。它记录的是你发起访问动作的“源头”，和后续的跳转无关。

2. URL（基础URL） #

文档说明：返回此历史项的URL，该URL是此历史项的基础URL，若需获取实际目标URL请查看getTargetUrl()。

这里的“基础URL”可以理解为这条历史记录条目绑定的主页面标识。在大多数简单跳转场景下，它会等于最终加载的页面URL，但如果遇到页面内包含iframe、嵌入式资源跳转这类复杂情况，它可能会指向父页面的URL，而不是实际渲染的子资源URL。

3. getTargetUrl()（实际目标URL） #

这个方法返回的是最终真正渲染在浏览器中的资源的URL——不管中间经过多少次HTTP重定向，也不管是主页面还是页面内的子资源（比如iframe、弹窗页面），它精准指向用户实际看到的内容对应的地址。

实际场景示例 #

示例1：简单HTTP重定向 #

假设你点击了一个短链接 http://go-to-stack.com，这个站点会自动302重定向到 https://stackoverflow.com。

• Original URL：http://go-to-stack.com（你最初点击的请求起点）
• URL：https://stackoverflow.com（这条历史记录绑定的主页面URL）
• getTargetUrl()：https://stackoverflow.com（和URL一致，因为没有复杂子资源）

示例2：iframe内嵌页面的历史记录 #

你打开主页面 https://my-portal.com，页面里的iframe加载了 https://my-portal.com/calendar。当你在iframe内操作并生成一条历史记录时：

• Original URL：https://my-portal.com/calendar（iframe内发起请求的初始URL）
• URL：https://my-portal.com（历史条目绑定的主页面基础URL）
• getTargetUrl()：https://my-portal.com/calendar（实际渲染的iframe内容的URL）

示例3：多步链式重定向 #

你输入短链接 http://short.link/123，先跳转到 http://my-blog.com/redirect，再跳转到最终页面 https://my-blog.com/final-post。

• Original URL：http://short.link/123（你最初输入的起始URL）
• URL：https://my-blog.com/final-post（历史记录的基础标识URL）
• getTargetUrl()：https://my-blog.com/final-post（实际展示的最终页面URL）

示例4：JavaScript触发的页面跳转 #

你打开 https://old-site.com，页面加载后通过JS自动跳转到 https://new-site.com/home。

• Original URL：https://old-site.com（最初请求的页面URL）
• URL：https://new-site.com/home（历史记录绑定的主页面URL）
• getTargetUrl()：https://new-site.com/home（实际渲染的目标页面URL）

一句话总结 #

• Original URL：记录你“从哪开始请求”的起点
• URL：历史条目的“主标识”，通常是最终主页面URL
• getTargetUrl()：精准指向用户实际看到的内容的URL

内容的提问来源于stack exchange，提问作者Anggrayudi H