首页 » 编程语言 » html » 正文

meta标签http-equiv=“Refresh”纯html网页跳转用法详解

在html元素<head>头部区域内的meta标签中有个属性是http-equiv=“Refresh”,该属性被所有主流浏览器支持,其用途有两种:一是网页定期自动刷新;二是自动跳转到指定页面,这个自动跳转的好处就是不需要JS调用,属于纯html网页自动跳转。    

一、网页定期自动刷新  

refresh出现在http-equiv属性中,使用属性content="时间",时间以秒为单位,表示每隔多少秒之后自动刷新该页面一次;

如果我们想要每4秒自动刷新网页一次,写法如下:

<meta http-equiv="refresh" content="4" >

定期自动刷新,比较适合用于时效性很强的场景中应用,比如说,新闻和论坛页面等,因为这些场景不断的有新的新闻信息、而论坛经常有新帖发布和新的回复信息,及时刷新可以及时的展现更多新新闻内容和新帖及新的回复内容!

不过,随着web编程技术的发展,现在一般不会用refresh这个功能来刷新,而是都转向使用ajax等新技术!

二、自动跳转至指定网页

我们还可以利用http-equiv="Refresh"属性设置在多少秒之后自动跳到到另一个页面,格式如下:

<meta http-equiv="refresh" content="时间;url=这里是跳转的URL">

如果想要立刻马上跳转到刘代码博客首页,就把时间设置成0秒,写法如下:

<meta http-equiv="refresh" content="0;url=http://www.liudaima.com" >

如果我们想要4秒之后跳转到刘代码博客首页,写法如下:

<meta http-equiv="refresh" content="4;url=http://www.liudaima.com" >

如果跳转至指定的页面和当前网页在同一目录中,则可以直接写上文件名。假设有一个abc.html的网页和当前网页属于同一目录之中,如果想要4秒后跳转至abc.html网页,则可以这样写:

<meta http-equiv="refresh" content="4;url=abc.html" >

三、完整代码演示

通过html元素meta标签中的http-equiv=“Refresh”来实现网页自动跳转,此方法简单容易,不需要其他额外的配置,也不需要运行其他的脚本代码,完全是纯html网页自动跳转;用这种方法,可以制作一个类似桌面快捷方法的简单跳转页面,根据前面学到的,只需要设置时间为0秒,在打开的一瞬间就可以直接跳转到你想要访问的网页,而且这样方式不用担心有什么脚本运行不安全的拦截,完整跳转代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;url=https://www.liudaima.com/">
<title>meta标签http-equiv=“Refresh”实现纯html网页立即跳转</title>
</head>
<body>
零秒也就是立刻跳转的意思
</body>
</html >

把上面代码中刘代码博客的地址,替换成你想要跳转的目标地址即可!

你也可以把当前页面制作成一个广告页面,在html元素<head>头部区域内的meta标签中使用属性http-equiv=“Refresh”,让你的广告页面暂停片刻就自动跳转至其他页面!



欢迎您发表评论或留言