关于说到移动端页面跳转是移动端开发中非常常见的一种需求,一般我们可以通过两种方式来实现页面跳转,分别是URL跳转和Javascript跳转。那么移动端页面跳转怎么做?实现方式有哪些?一起来看看吧。
移动端页面跳转怎么做?一、URL跳转
URL跳转是将当前页面的URL改变为另一个页面的URL,属于页面的整体刷新,具体实现方式如下:
1、HTML a 标签
HTML a标签是非常常见的跳转方式,只需要设置href属性为目标页面的URL即可,如下:
```html
<a href="example.com">跳转到example网站</a>
```
此方式相当于在当前页面打开一个新网页,简便易行。如果我们想要页面直接跳转不要在当前页打开新的页面,可以将a标签的target属性设置为_blank,如下:
```html
<a href="example.com" target="_blank">立即跳转</a>
```
2、javascript跳转
在javascript中,我们可以通过window.location.href、window.location.replace()和window.location.assign()三种方式来实现URL跳转。
- window.location.href :表示直接改变当前页面的URL,同样是一种整体刷新。
```javascript
window.location.href = "example.com";
```
- window.location.replace() :这种方式跳转后,历史记录里不再有上一页,无法后退,因此适用于登录后的跳转或从一个表单页面到另一个表单页面。
```javascript
window.location.replace("example.com");
```
- window.location.assign() :此方式相当于window.location.href,可以将当前页面的URL设置为目标页面的URL,也属于整体刷新。
```javascript
window.location.assign("example.com");
```
二、Javascript跳转
Javascript的跳转相对于URL跳转而言更为灵活,可以实现当前页面无刷新跳转或带参数跳转等复杂操作,实现方式如下:
1、直接用location.replace进行跳转:
```javascript
location.replace("example.com");
```
此种方式与window.location.replace()相同。
2、用location.href进行跳转:
```javascript
location.href = "example.com";
```
此方式相当于HTML a标签的跳转方式。
3、使用location.assign进行跳转:
```javascript
location.assign("example.com");
```
此方式与window.location.assign()相同。
4、location其他用法
a. 跳转到当前页面的某个片段:
```javascript
location.href = "#anchor";
```
b. 跳转到当前页面的上一页:
```javascript
location.href = document.referrer;
```
c. 跳转到当前页面的下一页:
```javascript
window.history.forward(1);
```
综上所述:移动端页面跳转怎么做?以上四种方法都可以实现页面跳转,区别在于url跳转存在页面整体刷新的问题,而javascript跳转相对而言更灵活,效率更高,适用于需要做一些特殊处理、带有参数或者无刷新跳转的情况。
本文链接:https://www.taodigood.com/jianwangzhan/11454.html
版权声明:本站部分文章来自网络转载,不以盈利为目的,只为分享知识使用,如涉及侵权请告知,核实后立即删除!