URLをチェックして、ウィンドウ内のハッシュポップ状態を制御するための?
が含まれているかどうかを確認します。他のすべてのブラウザは問題を抱えていません、IEだけです。
この方法でロードしようとすると、デバッガからこのエラーが発生します。
オブジェクトはプロパティまたはメソッド '
includes
'をサポートしていません
Popstateを通してページをロードしてもエラーになりません。
$(document).ready(function(e) {
if(window.location.hash) {
var hash;
if(window.location.hash.includes("?")) {
alert('I have a ?');
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(hash+'Content').addClass('pageOn').removeClass('pageOff');
}else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
};
} else {
$('#homeContent').addClass('pageOn').removeClass('pageOff');
}
$(window).on('popstate', function() {
var hash;
if(window.location.hash.includes("?")) {
hash = window.location.hash.substring(window.location.hash.indexOf('#') + 0,window.location.hash.indexOf('?'));
}else {
hash = window.location.hash;
};
if (hash=="#DRS" || hash=="#DRP" || hash=="#DFFI" || hash=="#DCI" || hash=="#DCP" || hash=="#DRP" || hash=="#DRMA" || hash=="#EICS" || hash=="#ORG"){
$(this).navigate({target: $(hash+'Content')});
if(window.location.hash.includes("?")) {
}else{
location.href = location.href+'?';
}
}else {
$(this).navigate({target: $('#homeContent')});
};
});
});
MDNリファレンスページ によると、includes
はInternet Explorerではサポートされていません。最も簡単な方法は、次のようにindexOf
を使うことです。
if(window.location.hash.indexOf("?") >= 0) {
...
}
IE11はString.prototype.includesを実装していますので、なぜ公式のPolyfillを使わないのですか?
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
出典: ポリフィル出典
私のimport 'core-js/es7/array';
にpolyfill.ts
を追加することで問題は解決しました。
私はAngularプロジェクトで同様の問題を抱えていました。私のpolyfills.tsで私は両方を追加しなければなりませんでした:
import "core-js/es7/array";
import "core-js/es7/object";
他のすべてのIE 11デフォルトを有効にすることに加えて。 (角度を使用する場合はpolyfills.tsのコメントを参照してください)
これらのインポートを追加した後、エラーがなくなり、私のオブジェクトデータは意図したとおりに生成されました。
Internet Explorerと同様に、JavaScriptメソッド "includes"はサポートしていないため、以下のようにエラーが発生します。
dijit.form.FilteringSelect TypeError:オブジェクトはプロパティまたはメソッド 'includes'をサポートしていません
そのため、JavaScriptの文字列メソッドを "includes"から "indexOf"に変更しました。
//str1 doesn't match str2 w.r.t index, so it will try to add object
var str1="acd", str2="b";
if(str1.indexOf(str2) == -1)
{
alert("add object");
}
else
{
alert("object not added");
}
私はincludes
から Lodash
を使用しました。これはネイティブと本当に似ています。
私はReactJを使っていて、問題を解決するためにimport 'core-js/es6/string';
の始めにindex.js
を使っていました。
IE11でReactを実行するのをサポートするためにimport 'react-app-polyfill/ie11';
も使用しています。
react-app-polyfill
このパッケージには、さまざまなブラウザ用のpolyfillが含まれています。これには、Create React Appプロジェクトで使用される最小要件と一般的に使用される言語機能が含まれています。
https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md
この質問とその答えは私を(SOの助けを借りて)私自身の解決策に導きましたが、ネイティブプロトタイプを改ざんしてはいけないと言う人もいます。
// IE does not support .includes() so I'm making my own:
String.prototype.doesInclude=function(needle){
return this.substring(needle) != -1;
}
それから私はすべての.includes()
を.doesInclude()
に置き換えただけで問題は解決しました。