HTML网页编程之自动刷新

页编程之自动刷新。

各位同学好，今天我们来分享一下如何设置网页自动刷新和延时跳转。我们都知道，在浏览器中点击刷新按钮或者按下F5键可以刷新页面，但在编程中有时需要自动刷新页面，加载最新的数据，无需用户参与。这就是我们今天要讲的内容。

接下来让我们来看看效果如何。

·首先，在页面上添加了一个滚动字幕和一张GIF动画，用于展示页面的刷新状态。

·现在可以看到，每隔3秒自动刷新一次，每当刷新时，字幕会回到初始位置，动画也会重新播放。

·如果不明显，可以看到鼠标指到的位置会不停地触发刷新按钮，效果已经很明显了。

现在让我们来看看实现代码。自动刷新使用了meta标签的http-equiv属性，值为referesh，表示自动刷新。设置了content属性，在内容中填写秒数，即每隔多少秒自动刷新页面。如果设置为3，则每隔3秒自动刷新页面，非常简单。

·延时跳转的实现也很简单。刚才已经将Content属性设置为3，现在只需要指定要跳转到的URL。它的写法是在3后面加上一个英文分号，然后加上url等于要跳转到的地址。在这里，我们跳转到新浪首页，例如视频。这样写好后，回到浏览器保存，可以看到倒计时321，成功跳转。在指定时间后，浏览器会自动跳转，功能已经实现。

今天的分享就到这里，希望各位同学可以照着写3遍，做到不看视频也能写出来。所有案例和相关文档都可以向我索取。

我们下期再见，想学编程可以关注网页编程、服务端编程、数据库和算法方面的内容。

点赞支持一下。

有两个页面parent.html和child.html，在parent页面里面通过window.open打开了child页面，child页面执行完代码之后想要刷新parent页面，然后立即查看到修改后的效果，那么我们就要在child里面直接能够刷新parent页面，这样就可以实现这样的效果。

1.1打开了parent.html页面

1.2在parent页面打开了child页面

1.3child页面点击确定按钮之后刷新了父页面parent

2 parent.html内容：

<!DOCTYPE html>

<html>

<head>

<title>parents</title>

function openWin() {

window.open('child.html', '_blank','width=500,height=400,top=200,left=400');

}

//定义callback方法，用于回调

function callback() {

refreshWin();

}

//刷新当前页面

function refreshWin() {

//调用刷新页面的方法，刷新当前页面，结果会再次弹出222

window.location.reload();

}

//刚记载的时候弹出222

function show(){

alert(222);

}

</script>

</head>

</body>

</html>

3 child.html内容：

<!DOCTYPE html>

<html>

<head>

<title>child</title>

function formSubmit(){

window.opener.callback();//上述执行完成后，调用打开页面的callback方法，此处是调用主页面的callback方法

window.close();//当前页面关闭

}

</script>

</head>

<body>

</body>

</html>

4 通过这样的操作很容易在子页面操作父页面所有的方法，感觉很方便，整理一下供大家参考。

欢迎关注我的头条号，谢谢大家！

置字符编码

属性：http-equiv 值：Content-Type 内容：text/html; charset=utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

设置有效期

设置网页的有效期之后, 过期网页将无法脱机浏览, 只有重新登录并连接该网页才可以再次浏览。

属性：http-equiv 值：expires 内容：Sun,1 Dec 2012 12:00:00 GMT

<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />

设置禁止缓存

网页制作者希望随时都能查看到最新的网页内容，则可以设置禁止页面缓存

属性：http-equiv 值：cache-control 内容：no-cache

<meta http-equiv="cache-control" content="no-cache" />

设置自动刷新

设置页面自动刷新，以实现信息的自动实时显示(秒)

属性：http-equiv 值：refresh 内容：5

<meta http-equiv="Refresh" content="5" />

设置自动跳转

属性：http-equiv 值：refresh 内容：5;url=http://www.xxx.com/

<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />

设置网页关键词

属性：name 值：keywords 内容：油漆，涂料，涂料行业，汽车涂料

<meta name="keywords" content="油漆，涂料，涂料行业，汽车涂料" />

设置搜索限制

属性：name 值：robots 内容：All

All 表示能搜索当前网页与其链接的网页，系统默认设置

Index 表示能搜素当前页面

Nofollow 表示不能搜素与当前网页链接的网页

Noindex 表示不能搜素当前网页

None 表示不能搜索当前网页与其链接的网页

设置网页说明

属性：name 值：description 内容：中国油漆网--您的油漆专家

<meta name="description" content="中国油漆网--您的油漆专家" />

设置网页的作者

属性: name 值: author 内容: LAMP Brother UI Team

<meta name="author" content="LAMP Brother UI Team" />

设置网页的版权

<meta name="copyright" content="2012-2014 EDU." />

设置移动网站

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/">

<base> 标签

base 元素可规定页面中所有链接的基准 URL。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。

这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

<base href="文件路径" target="目标窗口"/>

必需的属性

href URL 规定页面中所有链接的基准 URL。

target _blank 在何处打开页面中所有的链接。可通过在每个链接中使用 target 属性来覆盖此属性。

_parent

_self

_top

_blank 在一个新的未命名的窗口载入文档

_self 在相同的框架或窗口中载入目标文档

_parent 把文档载入父窗口或包含了超链接引用的框架的框架集

_top 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

实例:

<base target="_blank"/>

可以将该页面的所有<a>链接的默认属性设置为_blank

<base href="http://www.xxxxxx.com" />

在网页出现的相对链接"test.html"将对应htp://www.xxxxxx.com/test.html的页面

<basefont face="" size="" color=""/>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是 3。

color用于设置字体的颜色

在线咨询

上一篇：前端常用meta标签的作用以及全面整理
下一篇：6个私藏已久的音频资源网站，质量高又免费，且用且珍惜

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML网页编程之自动刷新

您的项目需求