ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML で自動ページジャンプを実装する 5 つの方法
HTML で自動ページジャンプを実装する 5 つの方法
- 不言オリジナル
- 2018-05-07 16:18:403811ブラウズ
この記事では、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='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 second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></mce:script>利点: よりユーザーフレンドリー欠点: Firefox はサポートしていません (Firefox は、span の innerText 属性をサポートしません。 pなど)
3) 相互JavaScript実装(firefox)と組み合わせます
コードをコピーします
コードは次のとおりです:<mce:script language="javascript" type="text/javascript"><!--
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href='http://liting6680.blog.163.com/blog/hello.html';
}
// --></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('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
// --></mce:script>上記の 5 つの例では、HTML での自動ページ ジャンプの 5 つの方法を紹介しました。気に入っていただければ幸いです。
以上がHTML で自動ページジャンプを実装する 5 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。