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