用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下attr和removeAttr的使用方法
Dec 28 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
json字符串传到前台input的方法
Aug 06 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
Python itertools.product方法代码实例
2020/03/27 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
VUE递归树形实现多级列表
2022/07/15 Vue.js