【JS】使用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实现页面挑战的方式还有很多,这里就不一一进行总结,在实际项目中,推荐大家使用第一种方式进行跳转。



posted @ 2019-07-11 14:32  城别  阅读(10762)  评论(0编辑  收藏  举报