HTML で自動ページジャンプを実装する 5 つの方法-htmlチュートリアル-php.cn

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

不言

リリース： 2018-05-07 16:18:40

オリジナル

3764 人が閲覧しました

この記事では、HTML での自動ページジャンプの方法を 5 つ紹介します。必要な方は参考にしてください。

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

1) htmlの実装

コードをコピーします

コードは次のとおりです:

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

ログイン後にコピー

利点: シンプル

欠点: Strutsでは使用できません

2) JavaScriptの実装

コードをコピーします

コードは次のとおりです:

<mce:script language="javascript" type="text/javascript"><!--  
setTimeout("javascript:location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;", 5000);  
// --></mce:script>

ログイン後にコピー

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

欠点: さまざまなブラウザーの影響を受けます

3) 相互JavaScriptと組み合わせる実装 (IE)

コードをコピーします

コードは次のとおりです:

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
var second = totalSecond.innerText;  
setInterval("redirect()", 1000);  
function redirect(){  
totalSecond.innerText=--second;  
if(second<0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

ログイン後にコピー

利点: よりユーザーフレンドリー

欠点: Firefox はサポートしていません (Firefox は、span の innerText 属性をサポートしません。 pなど)

3) 相互JavaScript実装(firefox)と組み合わせます

コードをコピーします

コードは次のとおりです:

<mce:script language="javascript" type="text/javascript"><!--  
var second = document.getElementById(&#39;totalSecond&#39;).textContent;  
setInterval("redirect()", 1000);  
function redirect()  
{  
document.getElementById(&#39;totalSecond&#39;).textContent = --second;  
if (second < 0) location.href=&#39;http://liting6680.blog.163.com/blog/hello.html&#39;;  
}  
// --></mce:script>

ログイン後にコピー

4) Firefoxが解決しない問題を解決しますInnerText

Copyのサポートコードは次のとおりです。 :

<span id="totalSecond">5</span>  
<mce:script language="javascript" type="text/javascript"><!--  
if(navigator.appName.indexOf("Explorer") > -1){  
document.getElementById(&#39;totalSecond&#39;).innerText = "my text innerText";  
} else{  
document.getElementById(&#39;totalSecond&#39;).textContent = "my text textContent";  
}  
// --></mce:script>

ログイン後にコピー

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

以上がHTML で自動ページジャンプを実装する 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。