用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 相关文章推荐
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
javascript 常用功能总结
Mar 18 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
js实现不重复导入的方法
Mar 02 Javascript
Angular的MVC和作用域
Dec 26 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python tornado上传文件的功能
2020/03/26 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python中remove函数的踩坑记录
2021/01/04 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
一道Delphi面试题
2016/10/28 面试题
客房主管岗位职责
2013/12/09 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
工作目标责任书
2014/07/23 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书