本篇主要介绍网页上常见的页面跳转技术。页面跳转有几种方式，比较常用的是window.location.href,window.location.replace,window.open，当然还有目前比较火的很多框架都采用的无刷新页面跳转技术window.history.pushState和window.history.replaceState。这些我都不讲^_^，我这里讲得是meta的一个相关配置。我相信，很多朋友看见实现的页面时会非常面熟，特别是男性！

以下是相关代码实现：

 <!DOCTYPE html>

 <html>

  <head lang="en">

 <meta charset="UTF-8">

 <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/>

 <title></title>

  <style>

 span {

 color: red;

  padding: 5px 15px;

  background: #cccccc;

 }

 button {

  padding: 10px;

  display: inline-block;

  vertical-align:top;

 border-radius: 4px;

 outline: none; }

  </style>

 </head>

  <body>

 <h1>对不起您浏览的页面已改变，<span>5</span> 秒后自动为您跳转... <button>手动跳转</button>

 </h1>

  <script>

  var span = document.querySelector('span'),

  btn = document.querySelector('button');

 var selfTimer = (function(){ var i = 5;

  return function(){

  span.innerHTML = --i;

  if (i == 0)

 { clearInterval(timer);

 } } })()

  timer = setInterval(selfTimer, 1000);

 btn.onclick = function() {

  window.location.hash = 'https://www.baidu.com'; }

 </script>

 </body>

  </html>

最后感谢慕课网的：
 作者：外号理论汪 
来源：慕课网

js技巧专题篇： 页面跳转的更多相关文章

  1. JS是否确认提示 +页面跳转

    JS友好提示 +页面跳转 function logout()...{if (confirm("你确定要注销身份吗?是-选择确定,否-选择取消"))...{window.locati ...

  2. JS页面跳转和js对iframe进行页面跳转、刷新

    一.js方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/ja ...

  3. js如何在指定页面跳转到另一指定页面

    要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...

  4. Js 的常用方法：页面跳转，Session，类继承

    MyApp.Base = function () { } var basePrototype = MyApp.Base["prototype"]; //对象克隆方法 basePro ...

  5. 用js 获取url 参数 页面跳转 ？ 后的参数

    记得之前在原来的公司写过这个东西,但是还是忘记怎么接住参数了,只知道怎么把id传过去! 问了身边的大佬 他首先推荐了我一个链接是别人写好的方法 附上链接地址:http://blog.csdn.net/ ...

  6. JS中的集中页面跳转的方法

    第一种:    <script language="javascript" type="text/javascript">           wi ...

  7. js中常用framesetiframe页面跳转传参方法实例大全

    logf的空间

  8. js获取主机名实现页面跳转

    <script language="javascript" type="text/javascript">        var hostname ...

  9. 自定义PHP页面跳转函数redirect($url, $time = 0, $msg = '')

    利用PHP的header()函数,可以实现页面跳转,如 header("Location: " . $url); 但它有个缺点,一旦HTTP报头块已经发送,就不能使用 header ...

随机推荐

  1. <Spark Streaming><Flume><Integration>

    Overview Flume:一个分布式的,可靠的,可用的服务,用于有效地收集.聚合.移动大规模日志数据 我们搭建一个flume + Spark Streaming的平台来从Flume获取数据,并处理 ...

  2. [AOP] 之让人一脸蒙哔的面向切面编程

    最近接触到了面向切面编程,看来很多的文档,算是有一点点了解了,趁自己还有点印象,先把它们给写出来 什么是AOP AOP(Aspect-Oriented Programming), 即 面向切面编程. ...

  3. C点滴成海----函数声明、函数定义、函数原型

    一.函数声明 1.格式 函数体去掉函数定义中的内容再加上分号,如下所示: 返回值类型 函数名( 类型 形参, 类型 形参… ); 返回值类型 函数名( 类型, 类型…); 2.特点 函数声明只是对编译 ...

  4. python django 创建虚拟环境

    DRF---django-rest-framework: 1.通过一个案例简单回顾一下django, 一.前后端分离,不分离 不分离:前端页面的显示,都是由后端返回的,就是说后端处理了参数,数据库,之 ...

  5. sqlite的数据类型

    参考sqlite官方文档:https://www.sqlite.org/datatype3.html 绝大多数的SQL数据库采用静态的.严格的数据类型,数据库中的值由数据表的列类型定义决定. 然而,s ...

  6. ES6 class的继承－学习笔记

    1.简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多. 子类必须在constructor方法中调用super方法,否则新建实例时会报错. ...

  7. input标签（图像域和隐藏域）

    图像域(图像提交按钮): <input type="image" name="..." src="imageurl"  /> 隐 ...

  8. 打开视图 ：1449 - the user specified as a definer （'root'@'%'）does not exist

    从一个数据库数据迁移到本地localhost   程序在调用到数据库的视图时报错,直接在数据库中打开视图时也报错,类似:   mysql 1449 : The user specified as a ...

  9. jqGrid 加载完jqGrid之后可以执行函数的方法

    , gridComplete: function() { jQuery('#first_gridpager').html("首页 "); jQuery('#prev_gridpag ...

  10. Failed to start component [StandardEngine[Catalina].stadardHost[loclahost].StandardContent[/GarageMgtB]]

    错误如图: 新导入的一个web工程,在problems中显示错误是:Target runtime Apache Tomcatv8.0 is not defined. 终于找到解决方法.方法是:在工程目 ...