用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写的实用看图工具实现代码
Jul 26 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
canvas知识总结
Jan 25 Javascript
layui选项卡效果实现代码
May 19 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
js canvas实现星空连线背景特效
Nov 01 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
当海贼王变成JOJO风
2020/03/02 日漫
Protoss兵种对照表
2020/03/14 星际争霸
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python print出共轭复数的方法详解
2019/06/25 Python
python绘制随机网络图形示例
2019/11/21 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
Python3如何判断三角形的类型
2020/04/12 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
党员组织关系介绍信
2014/02/13 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL