A-A+

js跳转代码一览

2016年01月05日 web前端设计 评论 2 条 阅读 7 views 次

js 跳转在前端中应用得是比较广泛的,但凡稍微有点应用的网站,想必都会用到 js 跳转代码吧,当然除了前端应用之外,js 跳转在后台的应用也比较广泛的,比如当我们删除了一条新闻之后会重新跳转回来,再或者当我们添加完毕一条新闻之后,弹出一个添加成功的对话框,然后再重新跳转回来,好了,总之,js 跳转是不可缺少的,这也是我收藏得最多的代码之一了,下面夏日博客把几种不同的 js 跳转代码整理下来,以便下次使用。

一、js跳转之页面之间,这也是后台较常用的一种js跳转代码,如下:

window.location.href='https://www.xiariboke.com/article/2392.html';

具体用法如:

<input type="button" onClick="location.href='https://www.xiariboke.com/article/2392.html'" />

在后台的应用中,我们多使用框架的结构,所以这种js跳转也可以作为框架之间的跳转,如下如示:

self.location='跳转页面URL地址';

top.location='跳转页面URL地址';

这个主要是应用在框架内部的跳转了,其中 self 和 top 就是框架名称。

二、js跳转到新窗口

这个也相当于打开新窗口了吧,当打开当前页面的时候,也出现了一个新的窗口,实例代码如下:

window.open('https://www.xiariboke.com/article/2392.html');

我们可以稍作改变,比如添加个 button 事件,就是点击之后弹出窗口,这种应用在网页前端不少吧,如下代码:

<input type="button" onClick="window.open('https://www.xiariboke.com/article/2392.html')" />

窗口的样式可以自己更改,这里不多做介绍了。

三、js跳转到上一页

跳转到上一页就是返回历史的意思了,所以这个代码也比较好认,不过写起来就比较难了,代码如下:

<a href="javascript:history.go(-1)">返回上一页</a>

这种也往往应用在后台了,比如在新闻列表页删除一条新闻,删除之后再重新回到上一页,也就是新闻列表页面了。

四、js跳转之页面定时自动跳转

这是前一段时间做一个在打开一个页面之后指定秒内跳转到另一个页面广告时候的一个代码,比如打开一个页面,指定3秒的时候自动跳转到另一个页面,可以用来做广告使用,实例代码如下:

<script language="javascript" type="text/javascript">
setTimeout("javascript:location.href='https://www.xiariboke.com/article/2392.html'",3000);
</script>

好了,关于 js 跳转暂时先整理这些吧,对于我做网页设计来说,这是不能缺少的,整理到夏日博客里面,在使用的时候正好拿来,就不用再到本地电脑里面去找了,嘿嘿。。。

标签:

2 条留言  访客:2 条  博主:0 条

  1. 中国历史

    浏览器的兼容如何?

  2. 新成

    不错i, 😛

给我留言