用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 相关文章推荐
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
7个JS基础知识总结
Mar 05 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
基于Angularjs实现分页功能
May 30 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
JS 事件机制完整示例分析
Jan 15 Javascript
JavaScript十大取整方法实例教程
Dec 03 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的图形函数中显示汉字
2006/10/09 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python常见工厂函数用法示例
2018/03/21 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
新年寄语2016
2015/08/17 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android