javascript - IE9 で JavaScript 関数がランダムに壊れる

Question

メインナビゲーションが IE9 で機能しなくなったという問題がサイトに発生しています。以前は機能していたのですが、突然機能しなくなりました。不思議なことに、IE9 でサイトにアクセスすると機能しますが、ページで ctrl+f5 を押すと壊れてしまいます。

custom.js ファイルはメインの "Nav Bar" js コーディングを含むファイルであるため、このファイルに問題があると想定しています。完全に正しくコーディングされているかどうかはわかりませんが、サイトは chrome、firefox、safari で完全に動作するので、JS が台無しになっているとは感じません。

custom.js はここにあります: (私が想定している [4] ナビゲーションバーに焦点を当てます)

/* --------------------------------------------------------------

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*/

ヘッダー nav の 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 &amp; 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

score 1 · Accepted Answer

一部の JavaScript の実行を停止している IE9 のスクリプトエラーがあります。これには、jQuery 用に定義された .mask メソッドがないようです。

jQuery(function($){
    $("#menu-primary-number").mask("(999) 999-9999");
    $("#menu-zip").mask("99999");
});

また、一部のブラウザーでは、ready ハンドラーでスローされた例外が異なる結果をもたらす可能性があります。

また、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 ブロックの 1 つに配置する必要があります。

javascript - IE9 で JavaScript 関数がランダムに壊れる

1 に答える 1

Related

Reference