用JavaScript实现页面重定向功能的教程

 更新时间:2015年06月04日 11:08:43   投稿:goldensun  
这篇文章主要介绍了用JavaScript实现页面重定向功能的教程,是JS入门学习中的基础知识,需要的朋友可以参考下

 页面重定向是什么?

当你点击一个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>


相关文章

  • 一起来看看js对象和事件的学习笔记

    一起来看看js对象和事件的学习笔记

    这篇文章主要为大家详细介绍了js对象和事件学习笔记,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 详解JavaScript中void语句的使用

    详解JavaScript中void语句的使用

    这篇文章主要介绍了详解JavaScript中void语句的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • JavaScript字符串对象substr方法入门实例(用于截取字符串)

    JavaScript字符串对象substr方法入门实例(用于截取字符串)

    这篇文章主要介绍了JavaScript字符串对象substr方法入门实例,substr用于根据开始位置和长度截取字符串,需要的朋友可以参考下
    2014-10-10
  • Ruffy javascript 学习笔记

    Ruffy javascript 学习笔记

    Ruffy javascript 学习笔记
    2009-11-11
  • 了解重排与重绘

    了解重排与重绘

    重绘和重排操作都是代价昂贵的操作,它们会导致web应用程序的UI反应迟钝,所以应该尽可能减少这类过程的发生。下面我们来简单了解一下
    2019-05-05
  • MVC+Layui弹出表单模态框的实现代码

    MVC+Layui弹出表单模态框的实现代码

    这篇文章主要介绍了MVC+Layui弹出表单模态框的实现代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 详解js的异步编程技术的方法

    详解js的异步编程技术的方法

    本篇文章主要介绍了详解js的异步编程技术,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • JS跨域问题详解

    JS跨域问题详解

    本文结合实际,分两种情况讨论跨域技术:首先讨论不同子域的跨域技术,然后讨论完全不同域的跨域技术。有需要的小伙伴可要看仔细了。
    2014-11-11
  • 删除Javascript Object中间的key

    删除Javascript Object中间的key

    这篇文章介绍了删除Javascript Object中间的key的方法,然后主要详谈了delete的用法,非常的详尽,给小伙伴们参考下
    2014-11-11
  • 详解JavaScript中|单竖杠运算符的使用方法

    详解JavaScript中|单竖杠运算符的使用方法

    JavaScript中|单竖杠通常被用来对浮点型数字进行取证,这里同时也介绍了单竖杠的运算规则,下面我们就来详解JavaScript中|单竖杠的使用方法
    2016-05-05

最新评论