我的网站问题,主导航不再适用于IE9。它以前工作过,但突然之间,它停止了工作。奇怪的是,如果我在IE9上访问该网站,它们可以工作,但是当我按住Ctrl + f5页面时,它会中断。
我假设我的custom.js文件中存在问题,因为这是我的主要“Nav Bar”js编码的文件。我不确定它是否完全正确编码,但该网站在chrome,firefox,safari中完美运行,所以我不觉得JS搞砸了。
custom.js就在这里:(关注[4] Nav Bar我假设)
/* --------------------------------------------------------------
INDEX:
[1] Search
[2] Popout Window
[3] Form Numbers
[4] Nav Bar
[5] Smooth Scroll
[6] Similar Pages Sidebar
[7] Estimate Form
-------------------------------------------------------------- */
/* --------------------------------------------------------------
[1*] Search
-------------------------------------------------------------- */
document.getElementById('headerSearch').onsubmit = function() {
window.location = "javascript:poptastic('http://www.google.com/search?q=site:northtownsremodeling.com ' + document.getElementById('headerInput').value);"
return false;}
/* --------------------------------------------------------------
[2*] Popout Window
-------------------------------------------------------------- */
var newwindow; function poptastic(url){
newwindow=window.open(url,'name', 'height=800,width=1020,scrollbars=yes');
if (window.focus) {newwindow.focus()}}
/* --------------------------------------------------------------
[3*] Form Numbers
-------------------------------------------------------------- */
jQuery(function($){
$("#menu-primary-number").mask("(999) 999-9999");
$("#menu-zip").mask("99999");
});
/* --------------------------------------------------------------
[4*] Set Selected Menu Items & Hide
-------------------------------------------------------------- */
/*START FUNCTION*/
$(function() {
$("#header-subnav ul").hide();
$('.menu-option-set a[data-subid]').on('click', function(e) {
e.preventDefault();
var $s = $("#" + $(this).attr('data-subid'));
if($s.is(':hidden')) {
$("#header-subnav").removeClass('hidden');
$("#header-subnav ul").hide();
$s.show();
} else {
$s.hide();
$("#header-subnav").addClass('hidden');
}
});
$('.menu-option-set a').click(function()
{
// if clicked item is selected then deselect it
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
// otherwise deselect all and select just this one
else
{
$('.menu-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
});
/* --------------------------------------------------------------
[5*] Smooth Scroll
-------------------------------------------------------------- */
$(function() {
$('.navbar a, .scroll a, .smoothscroll a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 850,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
/* --------------------------------------------------------------
[6*] Similar Pages Sidebar
-------------------------------------------------------------- */
$(function() {
$("a.show-similar-pages").click(function(e) {
$("#sidebar").removeClass('mobile-phone-hide');
$("#show-similar-pages").addClass('hidden');
$("#hide-similar-pages").removeClass('hidden');
e.preventDefault();
});
$("a.hide-similar-pages").click(function(e) {
$("#sidebar").addClass('mobile-phone-hide');
$("#hide-similar-pages").addClass('hidden');
$("#show-similar-pages").removeClass('hidden');
e.preventDefault();
});
});
/* --------------------------------------------------------------
[7*] Estimate Form
-------------------------------------------------------------- */
$(function() {
// Setup any needed variables.
var $form = $('.estimate-menu-form'),
$loader = '<img src="/img/loader.gif" height="11" width="16" alt="Loading..." />';
$form.append('<div id="response" class="hidden">');
var $response = $('#response');
// Do what we need to when form is submitted.
$form.on('click', 'input[type=submit]', function(e){
// Hide any previous response text and show loader
$response.hide().html( $loader ).show();
// Make AJAX request
$.post('/resource/script/estimate-menu-send.php', $form.serialize(), function( data ) {
// Show response message
$response.html( data );
// Scroll to bottom of the form to show respond message
var bottomPosition = $form.offset().top + $form.outerHeight() - $(window).height();
if( $(document).scrollTop() < bottomPosition )
$('html, body').animate({ scrollTop : bottomPosition });
// If form has been sent succesfully, clear it
if( data.indexOf('success') !== -1 )
$form.find('input:not(input[type="submit"], input[type="reset"]), textarea, select').val('').attr( 'checked', false );
});
// Cancel default action
e.preventDefault();
});
});/*END FUNCTION*/
以下是标题导航的HTML:
<div id="header-bottom">
<nav>
<ul class="menu-option-set">
<li><a href="/" <?php echo $home ?>>Home</a></li>
<li><a href="#" data-subid="services"<?php echo $services ?>>Services</a></li>
<li><a href="#" data-subid="gallery"<?php echo $gallery ?>>Gallery</a></li>
<li><a href="#" data-subid="customer"<?php echo $customer ?>>Customer</a></li>
<li><a href="#" data-subid="about"<?php echo $about ?>>About</a></li>
<li><a href="#" data-subid="contact"<?php echo $contact ?>>Contact</a></li>
<li><a href="#" data-subid="estimate"<?php echo $estimate ?>>Estimate</a></li>
<li><form id="headerSearch" class="textcenter headerSearch" method="get"><input id="headerInput" type="text" name="search"/></form></li>
</ul>
</nav>
</div>
<div id="header-subnav" class="hidden">
<nav>
<ul id="services">
<li><a href="/bathroom/"<?php echo $bathroom ?>>Bathroom</a></li>
<li><a href="/kitchen/"<?php echo $kitchen ?>><s>Kitchen</s></a></li>
<li><a href="/accessibility/"<?php echo $accessibility ?>><s>Accessibility</s></a></li>
<li><a href="/window/"<?php echo $window ?>><s>Windows</s></a></li>
<li><a href="/deck/"<?php echo $deck ?>><s>Decks</s></a></li>
<li><a href="/siding/"<?php echo $siding ?>><s>Siding</s></a></li>
</ul>
<ul id="gallery">
<li><a href="/gallery.php"<?php echo $photo ?>>Photo Gallery</a></li>
<li><a href="/project.php"<?php echo $project ?>>Project Gallery</a></li>
<li><a href="/before-and-after.php" <?php echo $before_and_after ?>><s>Before & After</s></a></li>
</ul>
<ul id="customer">
<li><a href="/coupons.php"<?php echo $coupons ?>><s>Coupons</s></a></li>
<li><a href="/testimonials.php"<?php echo $testimonials ?>>Testimonials</a></li>
<li><a href="/things-to-know.php"<?php echo $things_to_know ?>>Things to Know</a></li>
<li><a href="/financing.php"<?php echo $financing ?>>Financing</a></li>
<li><a href="/reviews.php"<?php echo $reviews ?>>Reviews</a></li>
</ul>
<ul id="about">
<li><a href="/about.php"<?php echo $about_us ?>>About Us</a></li>
<li><a href="/privacy.php"<?php echo $privacy ?>>Privacy Policy</a></li>
<li><a href="/alliances.php"<?php echo $alliances ?>>Strategic Alliances</a></li>
<li><a href="/certified-contractor.php"<?php echo $certified_contractor ?>>Certified Contractor</a></li>
<li><a href="/awards-and-accreditations.php"<?php echo $awards_and_accreditations ?>>Accreditations</a></li>
</ul>
<ul id="contact">
<li><a href="/contact.php"<?php echo $contact_us ?>>Contact Us</a></li>
<li><a href="/employment.php"<?php echo $employment ?>>Employment</a></li>
<li><a href="/estimate.php"<?php echo $request_estimate ?>>Request Estimate</a></li>
</ul>
<ul id="estimate">
<li>Menu estimate Form coming soon</li>
</ul>
</nav>
</div>
请注意,这一切在IE9中运行良好,但随机破坏,我没有更改HTML,它必须是JS的东西。
谢谢大家,我真的很感激!
编辑:对不起,我甚至没有发布您可以查看问题的网站。这里可以看到:http://www.remodeling-buffalo.com
答案 0 :(得分:1)
IE9中存在一个脚本错误,正在停止执行某些javascript。看来你没有为jQuery定义.mask方法:
jQuery(function($){
$("#menu-primary-number").mask("(999) 999-9999");
$("#menu-zip").mask("99999");
});
并且,在一些浏览器中抛出的异常可能会在某些浏览器中产生不同的结果。
它也让我觉得你在DOM加载之前尝试运行一些javascript,如:
document.getElementById('headerSearch').onsubmit = function() {
window.location = "javascript:poptastic('http://www.google.com/search?q=site:northtownsremodeling.com ' + document.getElementById('headerInput').value);"
return false;}
会导致它失败。由于您正在使用jQuery并且已经有一些现成的处理程序功能块,因此您应该将所有引用DOM的代码放在其中一个document.ready块中进行初始化。