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

推薦する

TypeScript ジェネリックを簡単に説明する方法

目次概要ジェネリック医薬品とはビルドシステムジェネリック医薬品の一般的な理解ジェネリッククラスジェネ...

MySQL で最大接続数を正しく変更する 3 つの方法

MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

入力できない無効な値はアクションレイヤーに渡すことができません

フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。質...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要

1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...

ネイティブJSは非常に見栄えの良いカウンターを実装します

今日は、ネイティブ JS で実装された見栄えの良いカウンターを紹介します。効果は次のとおりです。 以...

Vue で AES.js を使用する詳細な手順

AES暗号化の使用データ転送の暗号化と復号化処理 --- AES.js最初のステップ: vue に ...

CSS3のtext-fill-colorプロパティの詳細な説明

text-fill-color とは何を意味しますか?文字通りの意味から言えば、「テキストの塗りつぶ...