用JavaScript实现页面重定向功能的教程


Posted in Javascript onJune 04, 2015

 页面重定向是什么?

当你点击一个URL来访问一个网页X,但在内部你被定向到另一页Y,仅仅是因为页面重定向。这一概念是从不同于JavaScript 页面刷新 。

可能有各种原因,为什么想从原来的页面重定向。下面列出的几个原因:

  •     如果不喜欢你的域名,可以重定向到一个新的。同时,要引导所有访问者到新网站。在这种情况下,可以保持旧的域名,但放在一个页面到一个页面重定向使所有的旧域名游客可以来到新的域名。
  •     基于浏览器的版本,或者名字不同的页面,也可以根据不同的国家,而不是用服务器端网页重定向,可以使用客户端页面重定向到登陆用户在相应的页面。
  •     搜索引擎可能已经收录新页面。不过,在移动到另一个域名,那么不喜欢失去访客通过搜索引擎来了。所以,可以使用客户端页面的重定向。但请记住,这不应该做的,使搜索引擎傻瓜,否则,这可能让网站被取缔。

页面重新方向如何工作 ?
示例1:

这使用JavaScript在客户端页面的重定向是非常简单的。网站访问者重定向到一个新的页面,只需要添加在head部分加入一行如下:

<head>
<script type="text/javascript">
<!--
  window.location="http://www.newlocation.com";
//-->
</script>
</head>

示例 2:

可以将其重定向到一个新的页面之前显示相应的信息给网站访客。这将需要一个位时间延迟加载新页。以下是简单的例子来实现相同的:

<head>
<script type="text/javascript">
<!--
function Redirect()
{
  window.location="http://www.newlocation.com";
}

document.write("You will be redirected to main page in 10 sec.");
setTimeout('Redirect()', 10000);
//-->
</script>
</head>

这里的 setTimeout()是一个内置的JavaScript函数,可用于给定的时间间隔之后执行另一个函数。
示例3:

以下是例子重定向基于其浏览器不同的网页访问者:

<head>
<script type="text/javascript">
<!--
var browsername=navigator.appName; 
if( browsername == "Netscape" )
{ 
  window.location="http://www.location.com/ns.html";
}
else if ( browsername =="Microsoft Internet Explorer")
{
  window.location="http://www.location.com/ie.html";
}
else
{
 window.location="http://www.location.com/other.html";
}
//-->
</script>
</head>

Javascript 相关文章推荐
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
ext jquery 简单比较
Apr 07 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
javascript原型模式用法实例详解
Jun 04 #Javascript
使用JavaScript刷新网页的方法
Jun 04 #Javascript
JavaScript中Cookies的相关使用教程
Jun 04 #Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 #Javascript
浅析JavaScript中的事件机制
Jun 04 #Javascript
JavaScript中指定函数名称的相关方法
Jun 04 #Javascript
JavaScript中Function()函数的使用教程
Jun 04 #Javascript
You might like
php在字符串中查找另一个字符串
2008/11/19 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
javascript if条件判断方法小结
2014/05/17 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
对于js垃圾回收机制的理解
2017/09/14 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python编程实现正则删除命令功能
2017/08/30 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Mac安装python3的方法步骤
2019/08/09 Python
Django视图类型总结
2021/02/17 Python
高校毕业生自我鉴定
2013/10/27 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
委托书的写法
2014/08/30 职场文书
升学宴演讲稿
2014/09/01 职场文书
企业党员个人自我评价
2014/09/20 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2015入党自荐书范文
2015/03/05 职场文书
超级礼物观后感
2015/06/15 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis
AJAX实现省市县三级联动效果
2021/10/16 Javascript
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers