用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 Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
为原生js Array增加each方法
Apr 07 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
javascript中的this详解
2014/12/08 Javascript
js实现日历的简单算法
2017/01/24 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
理论讲解python多进程并发编程
2018/02/09 Python
python中单下划线_的常见用法总结
2018/07/10 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python修改txt文件中的某一项方法
2018/12/29 Python
python pillow库的基础使用教程
2021/01/13 Python
神路信息Java面试题目
2013/03/31 面试题
英文自荐信
2013/12/19 职场文书
大学生就业意向书范文
2014/04/01 职场文书
中学生励志演讲稿
2014/04/26 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年设计师工作总结
2014/11/25 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
小学班级标语口号大全
2015/12/26 职场文书