用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代码
Apr 22 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
js实现随机点名功能
Dec 23 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
解析Python中的__getitem__专有方法
2016/06/27 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
动态密码技术
2012/10/18 面试题
工程项目经理岗位职责
2013/12/15 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
企业年会祝酒词
2015/08/11 职场文书