用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 相关文章推荐
判断浏览器的javascript版本的代码
Sep 03 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php导入导出excel实例
2013/10/25 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
Python错误处理操作示例
2018/07/18 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
numpy库reshape用法详解
2020/04/19 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
责任心演讲稿
2014/05/14 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2016年幼儿园庆六一开幕词
2016/03/04 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers