javascript中页面跳转方式

学了这么多,该总结一下这些硬知识了

1.我们最常见到的,用的最多的是window.location.href方式 :

window.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'   //效果同上
location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html' //效果同上

但是我们不仅要知道怎么用,还需要了解什么是location:

            console.log(window.location);
//                hash:""               //设置或返回从井号 (#) 开始的 URL(锚)。
//                host:"localhost"      //设置或返回主机名和当前 URL 的端口号。
//                hostname:"localhost"  //设置或返回当前 URL 的主机名。
//                href:"http://localhost/04interesting/11js/05js-Internet/03pagejump/1.html"                //设置或返回完整的 URL。
//                origin:"http://localhost" //浏览器里面的,俺也不知道是啥?英文意思(起源)
//                pathname:"/04interesting/11js/05js-Internet/03pagejump/1.html"                //设置或返回当前 URL 的路径部分。
//                port:""               //设置或返回当前 URL 的端口号
//                protocol:"http:"      //设置或返回当前 URL 的协议

2.还是location方式window.location.replace(url); 和winodw.location.assign(url);例如:

//            location.href = '2.html'
//            location.assign('2.html');          //可以通过浏览器按钮前后回滚
//            location.replace('2.html')       //不记录历史页面

以上三者的结果都是一样的,但是:
replace()跟assign()方法的区别在于:
replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。
3.self.location=’top.htm’; 和 top.location跳转方式,以下结果都一样,代码如下所示:

location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
self.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
top.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'
self.location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html';
top.location = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'

4.window.open(url)方式也可以进行跳转,代码如下:

window.open('http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html')

5.window.history.back(-1); 跳转方式

    window.history.back(-1);
    window.history.go(-1);      //加载 history 列表中的某个具体页面。
    window.history.forward();   //加载 history 列表中的下一个 URL。不能返回到上一级页面

window.location.href与location.href,self.location.href,location.href都是本页面跳转

更详细的网址:https://my.oschina.net/justdo/blog/118391

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值