做响应式网站的时候, 我们经常看到什么 html5 黑科技, 独特的 meta 标签独得搜索引擎喜爱, 收录快之类的宣传语, 不少用户都是云里雾里. 其实这个 HTML5 中的 meta 标签到底是何方神圣, 如何用 meta 标签实现定时刷新和跳转? 今天给大家解答一下.
meta 源信息功能之页面定时跳转与刷新
几乎所有的网页头部都有 < meta > 源信息. 除了我们常用的定义编码, 关键字 (name="keywords"), 描述 (name="description")(for SEO), 还可以定义视区大小, 缩放比例等 (for 移动端), 如下:
以及, 定义网页的过期时间, Cookie 的过期时间等等.
就是我们网页平时跳转, 还可以使用 < meta > 实现, 下面几个典型代码示例:
这个表示当前页面每 5 秒钟刷一下, 刷一下~
这个表示当前页面 2 秒后跳到首页~
<meta http-equiv="refresh" content="0; url='http://www.qq.com/'">
页面直接跳转到腾讯网~
所以, 当我们下次遇到 "登录成功, 正在跳转到您之前访问页面......" 的时候, 可以使用的这个 refresh 刷新, 跳转功能, 可以说是成本最低的.
上面 Demo 效果就是上面第 1 个示例代码效果.
根据我的测试, 此特性包括 IE7 在内的浏览器都是支持的.
番外: 为何 meta 跳转不火呢?
大家可以看到, meta 跳转, 使用方便, 不用写 JS, 不用会后台代码, 定时跳转刷新什么的玩得照样很溜, 而且兼容性好, 为啥总感觉不温不火, 很少看见有人提及呢?
小编就此讲一下自己的看法, 有一个年代叫做 "万恶的 IE6 年代", 据说, 当年, 这一批老旧的浏览器, 问题很多, 其中就有对 meta2 个小小的不友好. 我也是听说, 不一定准确. 坊间是这么传闻的:
时间设为 0 的跳转, 有时候页面会闪一下;
跳转到其他页面, 浏览器后退按钮是不能用的;
但在 21 世纪, 这些老问题问题可以忽略不计.
不妨大胆试试 meta 跳转, 好好利用下浏览器的原生特性, 说不定就会发现比什么 JS 跳转之流用得更开心.
如果有想学习 web 前端的同学, 可来我们的 Web 前端技术学习 QQ 群: 608334068, 免费送整套系统的 Web 前端视频教程! 我每晚上 8 点还会在群内直播讲解前端知识, 这是一个仅供粉丝朋友们学习交流的群, 欢迎大家前来学习哦~ 不是学习 Web 前端的小伙伴非诚勿扰哦下面是部分资料截图:
来源: http://www.jianshu.com/p/8e7749a24a3a