ホームページ  >  記事  >  ウェブフロントエンド  >  HTML ページに自動的にジャンプする 5 つの方法

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

高洛峰
高洛峰オリジナル
2017-02-24 10:31:521987ブラウズ

詳しく説明するために、以下に 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 サイトに注目してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。