web-dev-qa-db-ja.com

すべてのブラウザー（IE7を含む）で機能するようにhashchangeイベントを取得します

ナビゲーションアイテムをクリックすると、AJAXページの読み込みがWordPress（ページの再読み込みなし） AJAXプライマリコンテンツ領域を更新します。私の問題は、IE7で壊れており、デバッグの観点からどこから始めればよいかわからないことです。

元のオープニングラインは

var queue = 0;

$('document').ready(function() {
    window.addEventListener("hashchange", hashChange, false);

    // Define window location variables
    var windowHost = window.location.Host,
        windowHash = window.location.hash,
        windowPath = window.location.pathname;

しかし、そのメソッドが存在するかどうかに基づいてaddEventListenerを条件付きにするように変更しました。いくつかの調査によると、このメソッドは古いバージョンのIE（私の場合は7など）では使用できません）。また、IE7デバッグコンソールはそれを使用できないメソッドとして識別していたので、かなり明確です。 。次のように行を書き直しましたが、コードがまだ機能していません。

var queue = 0;

$('document').ready(function() {
    if(window.addEventListener) {
        window.addEventListener("hashchange", hashChange, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("hashchange", hashchange, false);    
    }
    // Define window location variables
    var windowHost = window.location.Host,
        windowHash = window.location.hash,
        windowPath = window.location.pathname;

完全な元のスクリプトはこのPastebinで見ることができます： http://Pastebin.com/Jc9ySvrb

javascriptjqueryinternet-explorerfragment-identifierhashchange
17
Brian
  • attachEvent イベントの前にonを付ける必要があります。
  • メソッドの大文字と小文字は異なります。イベントをIE8で機能させるには、hashchangeのattachEventをhashChangeに変更します。
  • 提案された実装を使用して、IE7およびその他の古いブラウザーのhashchange実装をサポートします。

クロスブラウザの実装を作成しました。これにより、ブラウザにhashchange機能が追加されます。これを行う場合でも、 サポートされていません 。フォールバックは 仕様 に基づいています。

//function hashchange  is assumed to exist. This function will fire on hashchange
if (!('onhashchange' in window)) {
    var oldHref = location.href;
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            var _oldHref = oldHref;
            oldHref = newHref;
            hashChange.call(window, {
                'type': 'hashchange',
                'newURL': newHref,
                'oldURL': _oldHref
            });
        }
    }, 100);
} else if (window.addEventListener) {
    window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", hashChange);    
}

注：このコードは、1つのハッシュ変更イベントに役立ちます。 複数のhashchangeハンドラーを追加する場合は、次の方法を使用します。
2つの関数addHashChangeとremoveHashChangeを定義します。どちらのメソッドも、関数を引数として取ります。

(function() {
    if ('onhashchange' in window) {
        if (window.addEventListener) {
            window.addHashChange = function(func, before) {
                window.addEventListener('hashchange', func, before);
            };
            window.removeHashChange = function(func) {
                window.removeEventListener('hashchange', func);
            };
            return;
        } else if (window.attachEvent) {
            window.addHashChange = function(func) {
                window.attachEvent('onhashchange', func);
            };
            window.removeHashChange = function(func) {
                window.detachEvent('onhashchange', func);
            };
            return;
        }
    }
    var hashChangeFuncs = [];
    var oldHref = location.href;
    window.addHashChange = function(func, before) {
        if (typeof func === 'function')
            hashChangeFuncs[before?'unshift':'Push'](func);
    };
    window.removeHashChange = function(func) {
        for (var i=hashChangeFuncs.length-1; i>=0; i--)
            if (hashChangeFuncs[i] === func)
                hashChangeFuncs.splice(i, 1);
    };
    setInterval(function() {
        var newHref = location.href;
        if (oldHref !== newHref) {
            var _oldHref = oldHref;
            oldHref = newHref;
            for (var i=0; i<hashChangeFuncs.length; i++) {
                hashChangeFuncs[i].call(window, {
                    'type': 'hashchange',
                    'newURL': newHref,
                    'oldURL': _oldHref
                });
            }
        }
    }, 100);
})();
// Usage, infinitely many times:
addHashChange(function(e){alert(e.newURL||location.href);});
31
Rob W

attachEvent は2つのパラメータを取ります：

bSuccess = object.attachEvent(sEvent, fpNotify)

[そして、IE9より下のIEのすべてのバージョンに必要です！:( MDNリファレンス を参照]

これはうまくいく可能性があります：

if(window.addEventListener) {
    window.addEventListener("hashchange", hashChange, false);
}
else if (window.attachEvent) {
    window.attachEvent("onhashchange", hashchange);//SEE HERE...
    //missed the on. Fixed thanks to @Robs answer.
}

もちろん、可能であれば、JQueryを使用する必要があります。これは、これらすべてをカプセル化するためです。

そしていつものようにそこにプラグインがあります： http://benalman.com/projects/jquery-hashchange-plugin/

3
gideon