[浏览器]Scheme-relative URL

Scheme-relative URL，协议相对路由。是浏览器在处理输入栏\JS操作页面跳转API时会用到的一种策略。

情景

前提：使用window.open(url, '_blank')来打开一个页面

1. 运行环境：http://192.168.10.6:8080/，url: www.baidu.com, 结果http://192.168.10.6:8080/www.baidu.com；
2. 运行环境：http://192.168.10.6:8080/，url: //www.baidu.com, 结果www.baidu.com；
3. 运行环境：file:///E:/code/network.html，url: www.baidu.com, 结果file:///E:/code/www.baidu.com。文件不存在，无法访问；
4. 运行环境：file:///E:/code/network.html，url: //www.baidu.com, 结果file://www.baidu.com。文件不存在，无法访问；

原理

浏览器在解析URL时会根据：

• 当前的页面协议
• URL的格式
• 浏览器的安全策略

来决定最终的访问地址：

• 打开一个没有协议的URL时，浏览器会将其视为相对URL，与当前URL组合起来

• 当出现//时意味着告诉浏览器使用Scheme-relative URL ，将使用当前页面的协议，更换主机名。并且现代浏览器可能会提升http://为https://

API

• window.open()

• window.location属性，及Location对象

  • window.location.href替换当前页面，添加历史记录
  • window.location.assign()替换当前页面，添加历史记录
  • window.location.replace()替换当前页面，历史记录中也替换当前页面

• window.historyHistory API，允许操作浏览器会话的历史记录

  • window.history.pushState()
  • window.history.go()跳转到历史记录中指定位置
  • window.history.back()使用后退按钮
  • window.history.forward()使用前进按钮
  • window.history.pushState()受同源策略影响，向浏览器的会话历史栈增加了一个条目
  • window.history.replaceState()受同源策略影响，修改当前的历史记录条目