本篇主要介绍网页上常见的页面跳转技术。页面跳转有几种方式，比较常用的是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. core1.1 升级到 2.0

    1.直接修改项目 1.1 改成 2.0 Startup 的修改 去除构造函数中下面的代码 var builder = new ConfigurationBuilder() .SetBasePath(e ...

  2. log4net 2.0.8 不支持core 数据库记录日志

    经过反编译log4net 标准库的代码,原本有的数据库链接AdoNetAppender 在core里面引用的,没有掉了. 可能新版本会有.

  3. jaxb 组装及解析xml

    参考 http://blog.csdn.net/yanan_seachange/article/details/7325708 a.添加依赖 b.建立绑定关系 c.测试 a.添加依赖 <depe ...

  4. php优秀框架codeigniter学习系列——安装，配置

    下载 可在官网下载,我使用的是CodeIgniter-3.1.7. 目录 打开程序目录,可看到目录结构. 我这里做一点小的修改,新建了一个 index 目录,将 index.php 和一些静态文件放入 ...

  5. Map.putAll()用法

    import Java.util.HashMap; public class Map_putAllTest {public static void main(String[] args){   //两 ...

  6. Bug03_SSM整合_mybatis result maps collection already contains value...

    这个问题是在映射文件,但是这个映射文件是自动生成的. 所以想起来可能是在自动生成映射文件,pojo类时操作有问题.第一次运行时,出现错误,没有删除已经生成的文件就直接运行了第二次. 解决办法:删除旧的 ...

  7. HDU 6095 17多校5 Rikka with Competition（思维简单题）

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  8. Java中的13个原子操作类

    java.util.concurrent.atomic包一共提供了13个类.属于4种类型的原子更新方式,分别是原子更新基本类型,原子更新数组,原子更新引用和原子更新属性.Atomic包里的类基本都是使 ...

  9. Quartz 原理

    Quartz API :http://www.quartz-scheduler.org/api/2.2.0/ http://www.boyunjian.com/javadoc/org.apache.s ...

  10. 当超强台风“山竹”即将冲进南海，Power BI 你怎么看？

    这个周末“山竹 ”强势来袭!很多人的目光都在关注暴力水果“山竹”,这个号称70年最强最大风力超17级 台风“山竹”今天就已经在小悦家窗台肆虐咆哮了一天了!不知其他的小伙伴们是不是好好的一个周末就只能被 ...