用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 相关文章推荐
js获取当前路径的简单示例代码
Jan 08 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
javascript流程控制语句集合
Sep 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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/11/19 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
ie focus bug 解决方法
2009/09/03 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
Python学习资料
2007/02/08 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
工程造价专业大专生求职信
2013/10/06 职场文书
执行力心得体会
2013/12/31 职场文书
关键在于落实心得体会
2014/09/03 职场文书
单位在职证明书
2014/09/11 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
python tkinter实现定时关机
2021/04/21 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL