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について

推薦する

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

Vue 仮想リストの実例

目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...

MySQL の暗号化と復号化の例

MySQL の暗号化と復号化の例データの暗号化と復号化はセキュリティ分野で非常に重要です。プログラマ...

Vue3 テーブルコンポーネントの使用

目次1. Antデザインビュー1. 公式ウェブサイトアドレス2. 使い方3.電子書籍テーブルを表示す...

VMware15 centos7 ブリッジモード ssh に突然アクセスできなくなる問題を解決する

仮想マシンに独自の LAN IP を持たせたいので、テストを容易にするためにブリッジを使用します。 ...

jQuery はテーブルのページング効果を実装します

この記事では、テーブルのページング効果を実現するためのjQueryの具体的なコードを参考までに紹介し...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

JS は Web ページナビゲーションバーの特殊効果を実現します

この記事では、ネイティブ JS を使用して実装された実用的な Web ナビゲーション バー効果を紹介...

一般的な nginx コマンドをシェル スクリプトに組み込む方法の詳細な説明

1. nginxシェルスクリプトを保存するフォルダを作成する /usr/local/タスク/ngin...

Web フォントの読み込みを最適化する方法をご存知ですか?

タイトル通りです!一般的に使用される font-family はブラウザの組み込みフォントを読み込み...

CocosCreator ScrollView 最適化シリーズ: フレーム読み込み

目次1. はじめに2. 行き詰まった問題の分析3. 解決策(理論) 4. ソリューション(コード) ...

Linux yum コマンドを使用して mysql8.0 をインストールする方法の詳細なチュートリアル

1. 設置前によく掃除する rpm -pa | grep mysql または rpm -qa | g...

単一マシン上での Tomcat の複数インスタンスの実装

1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...

mysql8.0.19 でパスワードを忘れた場合の完璧な解決策

おすすめの読み物: MySQL 8.0.19 は、間違ったパスワードを 3 回入力するとアカウント ...

良いデザインについて

<br />「良いデザインとは何か」と答える 1 万人に対して、少なくとも 1 万 1 ...