使用js完成页面跳转

  1. 云栖社区>
  2. 博客>
  3. 正文

使用js完成页面跳转

振礼硕晨 2018-07-25 16:03:00 浏览462
展开阅读全文

今天做完了一个项目,其中遇到了很多问题,趁着现在没有新的任务,将自己遇到的一些问题进行总结。其中第一个问题就是使用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实现页面挑战的方式还有很多,这里就不一一进行总结,在实际项目中,推荐大家使用第一种方式进行跳转。

网友评论

登录后评论
0/500
评论
振礼硕晨
+ 关注