时间戳

首页 > 解决方案 > 部分 Javascript 无法在 Mozilla Firefox 或 Safari 上运行

firefox - 部分 Javascript 无法在 Mozilla Firefox 或 Safari 上运行

问题描述

以下是我正在构建的网站的编码。我目前正在确保它按应有的方式显示，并且所有按钮和诸如此类的东西都可以在所有浏览器中正常工作。无论出于何种原因，我都无法让其中一个 Javascript 代码在 Mozilla Firefox 或 Safari 上运行。我无法让最后一个代码（在页面之间来回切换时页面自动刷新）运行。此代码在我测试过的所有其他浏览器上运行。为了更容易理解我所指的代码，我添加了星号。

为了让这段 Javascript 在 Mozilla Firefox 和 Safari 上正常运行，我需要添加或更改哪些代码？任何帮助将非常感激。

<!DOCTYPE html>
<html lang="en">  
    
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
    
<body style="background-color: white; font-family: sans-serif;">
    
<title>#</title>
      
<div class="page-wrap">
     
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
        
<header class="cp_offcm03">
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="#">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">About Koizumi</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="#">Bibliography</a></li>
    
            
<div class="searchbar"> 
            
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>    
    
    
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
        return false;
    }
    
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
}  
 
**if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}** 
    
</script>
         
</div> 
</ul>    
</nav>
</header>     
               
<div class="setsumei">
    
 <br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
    <br><p style="text-align: justify; font-size: 16px;"></p>
    
 <p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
 <p style="text-align: center; font-size: 13px;">Photos Taken：◯◯◯◯/◯◯/◯◯</p>
    
 <br><p style="text-align: justify; font-size: 16px;">    
    
    #
 </p>    
        
</div>
        
<br><div class="image">
    
  <a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
 
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>

 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
 <br><br><a href="#"><img src="#" alt="#" width="90%"></a>
    
</div>
    
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© | <a href="#">日本語&lt;/a></footer>
      
</div>
</div>
      
<style>
    
 .searchbar{float: right;}
    
 .image{text-align: center;}
    
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
    
 .footer{width: 100%; 
           height: 40px; 
           text-align: center;
           border-top: 1px solid black; 
           position: absolute;
           bottom: 0;
           padding: 10px;}
    
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px; 
}

 .page-wrap:after {
  content: "";
  display: block; 
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 20px; 
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
        

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
    
}    

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
    
 .cp_cont {
    height: auto;
}
    
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;    
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
    
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
    
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
}   

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
    
    
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
    
    
    
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

        
        
 .cp_offcm03 a {
        padding: 20px;
        
    }
    
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
        
        
    }
    
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
    
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked + .cp_mobilebar .cp_menuicon { 
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    
 #cp_toggle03:checked + .cp_mobilebar span:before,
 #cp_toggle03:checked + .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
    
 input:checked ~ #h-menu_black {
    display: block;/*カバーを表示*/
    opacity: .6;
}
    
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
    
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center; 
    } 
    
 .noscroll{
        overflow: hidden;
        position: fixed;
    }
    
</style> 
      
</body>
</html>

标签： firefoxbrowsersafarimenudisplay

解决方案

推荐阅读