HTML で自動ページジャンプを実現する 5 つの方法

HTML で自動ページジャンプを実現する 5 つの方法

前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しました。この記事では、引き続き HTML ページ ジャンプに関する関連知識を紹介します。一緒に学びましょう。
以下に 5 つの例を挙げて詳しく説明します。これらの例の主な機能は、5 秒後に同じディレクトリ内の hello.html ファイルに自動的にジャンプすることです (必要に応じて変更してください)。

1) HTMLの実装


コードをコピー
コードは次のとおりです。

<ヘッド>
<meta http-equiv="refresh" content="5;url=hello.html">
</head>

長所: シンプル

デメリット: Struts Tilesでは使用できません

2) JavaScriptの実装


コードをコピー
コードは次のとおりです。

<mce:script language="javascript" type="text/javascript"><!--
タイムアウトを設定します("javascript:location.href='http://liting6680.blog.163.com/blog/hello.html'", 5000);
// --></mce:script>

利点: 柔軟性があり、他の機能と組み合わせることができます

デメリット: ブラウザによって影響される

3) カウントダウンJavaScript実装と組み合わせる(IE)


コードをコピー
コードは次のとおりです。

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var 秒 = totalSecond.innerText;
setInterval("リダイレクト()", 1000);
関数リダイレクト(){
totalSecond.innerText=--秒;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

利点: より人道的

デメリット: Firefox はサポートしていません (Firefox は span、div などの innerText 属性をサポートしていません)

3) カウントダウンJavaScript実装と組み合わせる(Firefox)


コードをコピー
コードは次のとおりです。

<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("リダイレクト()", 1000);
関数リダイレクト()
{
document.getElementById('totalSecond').textContent = --秒;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>

4) FirefoxがinnerTextをサポートしていない問題を解決する


コードをコピー
コードは次のとおりです。

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = "私のテキストinnerText";
} それ以外{
document.getElementById('totalSecond').textContent = "私のテキストのtextContent";
}
// --></mce:script>

5) 3)と3')の統合


コードをコピー
コードは次のとおりです。

<span id="totalSecond">5</span>
<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
(navigator.appName.indexOf("Explorer") > -1 の場合)
{
秒 = document.getElementById('totalSecond').innerText;
} それ以外
{
秒 = document.getElementById('totalSecond').textContent;
}
setInterval("リダイレクト()", 1000);
関数リダイレクト()
{
(秒数 < 0)の場合
{
場所.href='http://liting6680.blog.163.com/blog/hello.html';
} それ以外
{
(navigator.appName.indexOf("Explorer") > -1 の場合)
{
document.getElementById('totalSecond').innerText = 秒 --;
} それ以外
{
document.getElementById('totalSecond').textContent = 秒 --;
}
}
}
// --></mce:script>

上記の 5 つの例では、HTML を使用して自動ページ ジャンプを実現する 5 つの方法を紹介しています。気に入っていただければ幸いです。

<<:  さまざまなReact状態マネージャーの解釈と使用方法

>>:  JTAを実装するためにAtomikosと組み合わせたTomcatについて

推薦する

MySQLのデッドロックとログに関する詳細な説明

最近、MySQL オンラインでいくつかのデータ異常が発生しましたが、すべて早朝に発生しました。ビジネ...

Redis イメージの Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する落とし穴を避けるための注意MySQLコン...

MySQL 最適化の概要 - クエリエントリの合計数

1. COUNT(*) と COUNT(COL) COUNT(*)は通常、主キーに対してインデックス...

クリックして展開し、全文を読む機能を実現する純粋なCSS

注記記事表示リストインターフェースを開発する場合、情報の基本的な概要を提供するために記事ヘッダーコン...

HTML+CSS マージテーブル境界線サンプルコード

table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...

HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...

古典的なJavaScriptの再帰ケースの質問の詳細な分析

目次再帰とは何ですか?また、どのように機能しますか? 1. 合計(1)デジタル加算(2)配列の和2....

MySQL 8.0.11 インストール概要チュートリアル図

インストール環境: CAT /etc/os-release CentOS システムのバージョン情報を...

ウェブデザインの教育または学習プログラム

セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...

MySQL 学習チュートリアル クラスター化インデックス

クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...

Ubuntu での MySQL および MySQL Workbench のインストール チュートリアル

Ubuntu に jdk をインストールする: [リンク] UbuntuにEclipseをインストー...

MySQL スケジュールタスク (EVENT イベント) を詳細に設定する方法

目次1. イベントとは何ですか? 2. 「イベント」機能を有効にする1. 機能が有効になっているかど...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

フレックスボックスレイアウトの最終行の左揃えの実装アイデア

フレックスレイアウトを使用すると、9つの正方形のグリッドであれば、図に示すように均等に分割できます。...

Nginxのアクセスボリューム制御の詳細な説明

目的リクエスト アクセス ボリュームを制御するための Nginx ngx_http_limit_co...