HTML網(wǎng)頁編程之自動刷新

頁編程之自動刷新。

各位同學(xué)好，今天我們來分享一下如何設(shè)置網(wǎng)頁自動刷新和延時跳轉(zhuǎn)。我們都知道，在瀏覽器中點擊刷新按鈕或者按下F5鍵可以刷新頁面，但在編程中有時需要自動刷新頁面，加載最新的數(shù)據(jù)，無需用戶參與。這就是我們今天要講的內(nèi)容。

接下來讓我們來看看效果如何。

·首先，在頁面上添加了一個滾動字幕和一張GIF動畫，用于展示頁面的刷新狀態(tài)。

·現(xiàn)在可以看到，每隔3秒自動刷新一次，每當(dāng)刷新時，字幕會回到初始位置，動畫也會重新播放。

·如果不明顯，可以看到鼠標(biāo)指到的位置會不停地觸發(fā)刷新按鈕，效果已經(jīng)很明顯了。

現(xiàn)在讓我們來看看實現(xiàn)代碼。自動刷新使用了meta標(biāo)簽的http-equiv屬性，值為referesh，表示自動刷新。設(shè)置了content屬性，在內(nèi)容中填寫秒數(shù)，即每隔多少秒自動刷新頁面。如果設(shè)置為3，則每隔3秒自動刷新頁面，非常簡單。

·延時跳轉(zhuǎn)的實現(xiàn)也很簡單。剛才已經(jīng)將Content屬性設(shè)置為3，現(xiàn)在只需要指定要跳轉(zhuǎn)到的URL。它的寫法是在3后面加上一個英文分號，然后加上url等于要跳轉(zhuǎn)到的地址。在這里，我們跳轉(zhuǎn)到新浪首頁，例如視頻。這樣寫好后，回到瀏覽器保存，可以看到倒計時321，成功跳轉(zhuǎn)。在指定時間后，瀏覽器會自動跳轉(zhuǎn)，功能已經(jīng)實現(xiàn)。

今天的分享就到這里，希望各位同學(xué)可以照著寫3遍，做到不看視頻也能寫出來。所有案例和相關(guān)文檔都可以向我索取。

我們下期再見，想學(xué)編程可以關(guān)注網(wǎng)頁編程、服務(wù)端編程、數(shù)據(jù)庫和算法方面的內(nèi)容。

點贊支持一下。

題背景

網(wǎng)站更新后，解決了某些bug，但是用戶未刷新網(wǎng)頁，還在瀏覽網(wǎng)站更新前內(nèi)容……

然后用戶說：“bug根本沒解決啊！”

我說：“你刷新下頁面啊”

用戶說：“嗯，好了”

那么，有沒有一種方式，可以直接通知用戶網(wǎng)站有更新，提示用戶主動刷新頁面呢？

有！當(dāng)然有

說明

本項目以vue2舉例，其他的Vue3、React等，請自行實現(xiàn)。

假設(shè)你基于git提交代碼，以下從git的commit head中獲取唯一值

（注：或者其他可行方式替代，自行實現(xiàn)）

解決方案 - 純前端檢測

還有其他解決方案，如：從服務(wù)器獲取版本號，輪詢查詢等。

但上述都有性能問題、或需要服務(wù)端配合、或需要添加一些配置項，顯得麻煩，讀者可自行選擇

1.生成唯一標(biāo)識

在vue打包的時候，編寫一個腳本，存儲提交的commit head作為hash值，也就是唯一標(biāo)識。

在vue.config.js的同級，新建一個release.js文件：

const execSync = require('child_process').execSync;
const fs = require('fs');
const path = require('path');

const dirName = path.dirname(__filename);

// 執(zhí)行g(shù)it命令，獲取當(dāng)前HEAD指針?biāo)赶虻奶峤坏耐暾Ｖ?const gitHead = execSync('git rev-parse HEAD', {
  cwd: path.resolve(dirName, './')
}).toString().trim()
// 只取前十個數(shù)字或字母
const hash = gitHead.substring(0, 10);

// 版本號：時間戳+git的hash值
const version = Date.now() + '_' + hash;

// .env.production文件路徑
const envFile = path.join(dirName, './.env.production');

// 讀取目標(biāo)文件，并通過正則判斷.env.production文件中是否有VITE_APP_VERSION開頭的環(huán)境變量
try {
  const data = fs.readFileSync(envFile, {
    encoding: 'utf-8',
  });
  const reg = /VUE_APP_VERSION=\d+_[\w-_+:]{7,14}/g;
  const releaseStr = `VUE_APP_VERSION=${version}`;
  let newData = '';
  if (reg.test(data)) {
    newData = data.replace(reg, releaseStr);
    fs.writeFileSync(envFile, newData);
  } else {
    newData = `${data}\n${releaseStr}`;
    fs.writeFileSync(envFile, newData);
  }
  console.log(`插入release版本信息到 env.production 完成，版本號：${version}`);
} catch (e) {
  console.error(e);
}

上述代碼，把提交的git commit head值取前10位數(shù)，再加上時間戳組成hash值。

并且把該值寫入.env.production文件，變量名為VUE_APP_VERSION

2.hash對比

用戶登錄的時候，把版本號的hash值本地存儲

import Cookies from "js-cookie";
Cookies.set('app_version', process.env.VUE_APP_VERSION)

然后在路由守衛(wèi)中，比較緩存值app_version、與當(dāng)前獲取的process.env.VUE_APP_VERSION值是否相等

相等：說明沒更新，
不相等：則說明網(wǎng)站更新了，因為網(wǎng)站發(fā)布后會重新生成一個VUE_APP_VERSION值，那么這時候就要提示用戶更新了

路由守衛(wèi)permisssion.js的關(guān)鍵代碼如下

import Cookies from "js-cookie";
import { Message, MessageBox } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

// 是否首次進(jìn)入網(wǎng)頁，首次不校驗刷新
let isFirstEntry = true;

// 檢測網(wǎng)站更新
function checkUpdate() {
  // 系統(tǒng)的版本號
  const system_app_version = process.env.VUE_APP_VERSION
  // 瀏覽器的版本號
  const web_app_version = Cookies.get('app_version')
  if(isFirstEntry) {
    isFirstEntry = false
  } else {
    // 如果不存在系統(tǒng)的版本號，則設(shè)置系統(tǒng)版本號，第一次不提示刷新，否則換個瀏覽器又提示了
    if(!web_app_version) {
      Cookies.set('app_version', system_app_version)
    } else {
      // 如果瀏覽器的版本號不等于系統(tǒng)的版本號，則重設(shè)瀏覽器的版本號，并提示刷新
      if (system_app_version !== web_app_version) {
        console.log('版本號不一致')
        refreshTip(system_app_version)
      }
    }
  }
}

// 刷新提示
function refreshTip(system_app_version) {
  MessageBox.confirm('當(dāng)前網(wǎng)站內(nèi)容有更新，是否刷新頁面？', '提示', {
    confirmButtonText: '立即刷新',
    cancelButtonText: '忽略',
    type: 'warning'
  }).then(() => {
    Cookies.set('app_version', system_app_version)
    window.location.reload()
  }).catch(() => {
    console.log('取消了')
    Cookies.set('app_version', system_app_version)
  })
}

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
	to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else { 
      // 只在生產(chǎn)環(huán)境檢測是否有版本更新
	  if(process.env.NODE_ENV === 'production') {
        checkUpdate()
      }
	}
}

上述方法是在在用戶切換菜單時，監(jiān)聽路由變化來檢測是否更新，這是比較常用的方法。

此外，有的人會輪詢檢測是否有更新，這樣會損耗性能且不優(yōu)雅。

請讀者自行選擇觸發(fā)的時機(jī)。

最后

最后，在打包時，修改一下打包命令，執(zhí)行release.js并打包

修改package.json文件：

'scripts': {
	"build:prod": "node ./release.js && vue-cli-service build",
}

恭喜你，大功告成了！

關(guān)于作者

作者在CSDN社區(qū)叫：“前端沒錢”

CSDN主頁地址：https://blog.csdn.net/yan1915766026

作者是前端開發(fā)人員，會經(jīng)常發(fā)布一些好用的工具、方法，并且持續(xù)更新《若依nodejs全棧教程》希望幫助更多的前端開發(fā)人員。

感謝關(guān)注！

有兩個頁面parent.html和child.html，在parent頁面里面通過window.open打開了child頁面，child頁面執(zhí)行完代碼之后想要刷新parent頁面，然后立即查看到修改后的效果，那么我們就要在child里面直接能夠刷新parent頁面，這樣就可以實現(xiàn)這樣的效果。

1.1打開了parent.html頁面

1.2在parent頁面打開了child頁面

1.3child頁面點擊確定按鈕之后刷新了父頁面parent

2 parent.html內(nèi)容：

<!DOCTYPE html>

<html>

<head>

<title>parents</title>

function openWin() {

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

}

//定義callback方法，用于回調(diào)

function callback() {

refreshWin();

}

//刷新當(dāng)前頁面

function refreshWin() {

//調(diào)用刷新頁面的方法，刷新當(dāng)前頁面，結(jié)果會再次彈出222

window.location.reload();

}

//剛記載的時候彈出222

function show(){

alert(222);

}

</script>

</head>

</body>

</html>

3 child.html內(nèi)容：

<!DOCTYPE html>

<html>

<head>

<title>child</title>

function formSubmit(){

window.opener.callback();//上述執(zhí)行完成后，調(diào)用打開頁面的callback方法，此處是調(diào)用主頁面的callback方法

window.close();//當(dāng)前頁面關(guān)閉

}

</script>

</head>

<body>

</body>

</html>

4 通過這樣的操作很容易在子頁面操作父頁面所有的方法，感覺很方便，整理一下供大家參考。

歡迎關(guān)注我的頭條號，謝謝大家！

在線咨詢

上一篇：HTML 列表
下一篇：微軟已修復(fù)，Win10/Win11被曝MSHTML零日漏洞

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商