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網頁編程之自動刷新

您的項目需求