原生js_BOM_history与location对象

179 阅读1分钟

原生页面跳转(history)

back

  • // 与点击浏览器的回退按钮效果相同;
    window.history.back();
    

forward

  • // 加载历史列表中的下一个 URL-->若是回退过,会向前跳转一个页面,若是没有会退过,无变化;
    window.history.forward();
    

go

  • window.history.go(num)
    
  • num 为正数 -> 向前跳num个页面
  • num为负数 ->向后跳num个页面

pushState

  • 使用pushState可以添加历史记录条目;

  • 举例说明

    • [1]在当前页面mytest.clipworks.com:3001/report/fina…,调用window.location.pushState({}, '', 'mytest.clipworks.com:3001/index')方法;
    • [2]此时会发现浏览器地址栏显示为/index页面,但并不会导致浏览器加载/index页面的内容甚至不会检测/index页面是否存在;若是在vue页面中使用自然也不会走生命周期函数!

replaceState

  • history.replaceState() 的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。 注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项

location对象

location对象可以获取到 当前页面的 url、协议类型、域名、端口号、请求携带参数等信息;