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

HTML ページに自動的にジャンプする 5 つの方法

高洛峰

リリース： 2017-02-24 10:31:52

オリジナル

1988 人が閲覧しました

詳しく説明するために、以下に 5 つの例を示します。これらの例の主な機能は、5 秒後に、同じディレクトリ内の hello.html ファイルに自動的にジャンプすることです (必要に応じて変更してください)。

1) html

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

ログイン後にコピー

の実装利点: シンプル

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

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はサポートしていません)スパン、pなどのinnerText属性

3) 相互作用(firefox)のJavaScript実装と結合

<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をサポートしていない問題を解決

<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) 統合3) と3')

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

ログイン後にコピー

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

HTML ページに自動的にジャンプする 5 つの方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。