HTML页面跳转的5种方法 – Java爱好者
Java爱好者
Java爱好者
HTML页面跳转的5种方法

下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。
1) html的实现

  1. <head>
  2. <!– 以下方式只是刷新不跳转到其他页面 –>
  3. <meta http-equiv=“refresh” content=“10”>
  4. <!– 以下方式定时转到其他页面 –>
  5. <meta http-equiv=“refresh” content=“5;url=hello.html”>
  6. </head>

优点:简单
缺点:Struts Tiles中无法使用
2) javascript的实现

  1. <script language=“javascript” type=“text/javascript”>
  2. // 以下方式直接跳转
  3. window.location.href=‘hello.html’;
  4. // 以下方式定时跳转
  5. setTimeout(“javascript:location.href=‘hello.html’“, 5000);
  6. </script>

优点:灵活,可以结合更多的其他功能
缺点:受到不同浏览器的影响

3) 结合了倒数的javascript实现(IE)

  1. <span id=“totalSecond”>5</span>
  2. <script language=“javascript” type=“text/javascript”>
  3. var second = totalSecond.innerText;
  4. setInterval(“redirect()”, 1000);
  5. function redirect(){
  6. totalSecond.innerText=–second;
  7. if(second<0location.href=‘hello.html’;
  8. }
  9. </script>

3#) 结合了倒数的javascript实现(firefox)

  1. <script language=“javascript” type=“text/javascript”>
  2. var second = document.getElementById(‘totalSecond’).textContent;
  3. setInterval(“redirect()”, 1000);
  4. function redirect()
  5. {
  6. document.getElementById(‘totalSecond’).textContent = –second;
  7. if (second < 0location.href = ‘hello.html’;
  8. }
  9. </script>

4) 解决Firefox不支持innerText的问题

  1. <span id=“totalSecond”>5</span>
  2. <script language=“javascript” type=“text/javascript”>
  3. if(navigator.appName.indexOf(“Explorer”) > -1){
  4. document.getElementById(‘totalSecond’).innerText = “my text innerText”;
  5. } else{
  6. document.getElementById(‘totalSecond’).textContent = “my text textContent”;
  7. }
  8. </script>

5) 整合3)和3#)

  1. <span id=“totalSecond”>5</span>
  2. <script language=“javascript” type=“text/javascript”>
  3. var second = document.getElementById(‘totalSecond’).textContent;
  4. if (navigator.appName.indexOf(“Explorer”) > -1)  {
  5.     second = document.getElementById(‘totalSecond’).innerText;
  6. } else {
  7.     second = document.getElementById(‘totalSecond’).textContent;
  8. }
  9. setInterval(“redirect()”, 1000);
  10. function redirect() {
  11. if (second < 0) {
  12.     location.href = ‘hello.html’;
  13. } else {
  14.     if (navigator.appName.indexOf(“Explorer”) > -1) {
  15.         document.getElementById(‘totalSecond’).innerText = second–;
  16.     } else {
  17.         document.getElementById(‘totalSecond’).textContent = second–;
  18.     }
  19. }
  20. }
  21. </script>

发表评论

textsms
account_circle
email

Java爱好者

HTML页面跳转的5种方法
下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。 1) html的实现 <head> <!-- 以下…
扫描二维码继续阅读
2019-07-18