用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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
javascript之卸载鼠标事件的代码
May 14 Javascript
javascript 特性检测并非浏览器检测
Jan 15 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 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 max_execution_time执行时间问题
2011/07/17 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python读写文件方法总结
2015/06/09 Python
python文本数据相似度的度量
2018/03/12 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
如何撰写岗位职责
2014/02/01 职场文书
yy生日主持词
2014/03/20 职场文书
捐助倡议书范文
2014/04/15 职场文书
应届大学生自荐书
2014/06/17 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
个人合作协议范本
2015/08/06 职场文书
升学宴祝酒词
2015/08/11 职场文书
全网非常详细的pytest配置文件
2022/07/15 Python
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers