使用js完成页面跳转-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

使用js完成页面跳转

简介: 今天做完了一个项目,其中遇到了很多问题,趁着现在没有新的任务,将自己遇到的一些问题进行总结。其中第一个问题就是使用js实现页面的跳转。 1.window.

今天做完了一个项目,其中遇到了很多问题,趁着现在没有新的任务,将自己遇到的一些问题进行总结。其中第一个问题就是使用js实现页面的跳转。

1.window.location.href
// 将js直接写在html中
<button onclick="window.location.href='https://www.baidu.com'">点击跳转</button>

//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
    myBtn.onclick=function(){
        window.location.href="https://www.baidu.com";
    }
</script>

//需要注意的是,这里的window可以省略,即直接使用location.href
<button onclick="location.href='https://www.baidu.com'">点击跳转</button>
2.location.replace
// 将js直接写在html中
<button onclick="location.replace('https://www.baidu.com')">点击跳转</button>

//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
    myBtn.onclick=function(){
        window.location.replace("https://www.baidu.com")
    }
</script>
  • window.location.href 和 location.replace的区别:
    1. 有3个页面 a,b,c。 如果当前页面是c页面,并且c页面是这样跳转过来的:a->b->c
    2. b->c 是通过 window.location.replace("..xx/c") 此时b页面的url会被c页面代替,并且点击后退按钮时会回退到a页面(最开始的页面)
    3. b->c是通过 window.location.href("..xx/c") 此时b页面的路径会被c页面代替,但是点击回按钮后页面回退的是b页面
3.window.navigate("https://www.baidu")
// 将js直接写在html中
<button onclick="window.navigate('https://www.baidu.com')">点击跳转</button>

//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
        window.navigate("https://www.baidu.com")
    }
</script>
  • window.location.href 和 window.navigate的区别:
  1. 首先说明的是 window.navigatewindow.location.href 都是实现页面链接跳转的。
  2. window.navigate 这个方法是只针对IE的,不适用于火狐等其他浏览器,在HTML DOM Window Object中,根本没有列出window.navigate这个方法,所以这个方法尽量少用,遗忘最好。
  3. window.location.href 兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠谱。
4.window.open("https://www.baidu.com")
// 将js直接写在html中
<button onclick="window.open('https://www.baidu.com')">点击跳转</button>

//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
        window.open("https://www.baidu.com")
    }
</script>
2.self.location 和 top.location(两者的写法实相同的)
// 将js直接写在html中
<button onclick="top.location.href='https://www.baidu.com'">点击跳转</button>

//将js和html分开
<button class="click_btn">点击跳转</button>
<script>
    var myBtn=document.getElementsByClassName('click_btn')[0];
        myBtn.onclick=function(){
            self.location="https://www.baidu.com";
    }
</script>
  • self.location 和 top.location 的区别和作用:
  1. 两者可以结合起来,防止非法引用我们的网页
  2. 假如你的网页地址是:http://www.a.com,别人的网址是http://www.b.com。他在他的页面用iframe等框架引用你的http://www.a.com
    3.那么你可以用一下代码,来转向你的页面
if(top.location.href!=self.location.href){
  location.href="http://www.a.com";
}

其实使用js实现页面挑战的方式还有很多,这里就不一一进行总结,在实际项目中,推荐大家使用第一种方式进行跳转。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章