IE11で「window.location.hash.includes」を使用すると「オブジェクトはプロパティまたはメソッド「includes」をサポートしません」がスローされる


173

?ウィンドウ内のハッシュポップの状態を制御するために、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')});
            };
        });
});

window.location.hashInternet Explorer 11の価値は何ですか?
nil、2015年

回答:


242

MDNリファレンスページによると、includesはInternet Explorerではサポートされていません。最も簡単な代替方法はindexOf、次のようにを使用することです。

if(window.location.hash.indexOf("?") >= 0) {
    ...
}

1
これでうまくいきませんif(window.location.hash.indexOf( "?")> = 0){//何もしない} else {location.href = location.href + '?'; }
Erik Grosskurth 2015年

追加する必要がありますか?URLにまだURLがない場合は、URLの末尾まで
Erik Grosskurth

1
これは古い質問と回答であることはわかっていますが、Windows 10 IE 11ではString.prototype.includesが機能しているようです
troxwalt

2
@troxwaltいいですね、でもWindows 7 IE11では動作しません!
nevada_scout 2018

反応している場合は、ポリフィルパッケージを使用して、ポリフィルを手動で追加する必要がありません...
CPHPython

58

IE11はString.prototype.includesを実装しているので、公式のポリフィルを使用しないのはなぜですか?

  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;
      }
    };
  }

ソース:ポリフィルソース




36

import 'core-js/es7/array';私に追加さpolyfill.tsれた問題は私のために修正されました。


これはずっと前に投稿されましたが、おそらくこれは新しいフレームワークの誰かに何らかの形で役立つかもしれませんが、選択した答えは特別なユースケース以外のものには十分だと思います。
Erik Grosskurth、2018年

1
'core-js / es / array'をインポートします。2020年現在
timhc22

14

Angularプロジェクトでも同様の問題がありました。私のpolyfills.tsに両方を追加する必要がありました:

    import "core-js/es7/array";
    import "core-js/es7/object";

他のすべてのIE 11のデフォルトを有効にすることに加えて。(角度を使用する場合は、polyfills.tsのコメントを参照してください)

これらのインポートを追加した後、エラーはなくなり、オブジェクトデータは意図したとおりに入力されました。


これは私のために働いています。とにかく、これらの2つのインポートは何をしますか?そして、どのインポートがインクルードエラーを修正しましたか?またはemの両方がインクルードエラー用ですか?
iamjoshua

IE11はMicrosoftによる機能の更新を受信しなくなったため、JavaScriptの実装は古いものであり、ES5を介したメソッドのみをサポートしています。これらの2つのファイルをインポートすることにより、ES7を介して「includes」メソッドを含む配列とオブジェクトのポリフィルスクリプトを追加します。
bsheps

5

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");
}


1

私はReactJを使用import 'core-js/es6/string';しており、最初はindex.js問題を解決するために使用しました。

import 'react-app-polyfill/ie11';IE11でのReactの実行をサポートするためにも使用しています。

反応アプリポリフィル

このパッケージには、さまざまなブラウザー用のポリフィルが含まれています。これには、最小要件と、Create React Appプロジェクトで使用される一般的に使用される言語機能が含まれています。

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md


1
IE11コンソールで失敗するすべての機能を手動でポリフィルし始めました...時間節約の答えに本当に感謝しています。これら2つのパッケージをpackage.jsonに一度に追加するには:npm i --save core-js react-app-polyfill
CPHPython

ところで、Githubで提案されているcore-js/es6ように、v3ではもう存在しないようです。import 'core-js';
CPHPython 2019

0

この質問とその回答から私は自分のソリューションに(SOの助けを借りて)導きましたが、ネイティブプロトタイプを改ざんしてはならないという人もいます。

  // IE does not support .includes() so I'm making my own:
  String.prototype.doesInclude=function(needle){
    return this.substring(needle) != -1;
  }

その後、すべて.includes()を置き換えるだけで.doesInclude()問題は解決しました。


2
.includes ()文字列と配列の両方で機能します。あなたのsubstring()ソリューションは、文字列でのみ動作し、配列で失敗します。他の人が答えたように、indexOf()代わりにを使用することはsubstring()、どちらの場合でも機能するため、より優れています。
Memet Olsen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.