[javascript] ‘window.location.hash.includes’를 사용하면 IE11에서 “개체가 속성 또는 메서드 ‘includes’를 지원하지 않습니다”가 발생합니다.

?창에서 해시 팝 상태를 제어 하기 위해 URL에 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인터넷 익스플로러에서 지원되지 않습니다. 가장 간단한 대안은 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에서와 같이 자바 스크립트 메소드 “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문제를 해결할 때 사용 했습니다 .

import 'react-app-polyfill/ie11';IE11에서 React 실행을 지원하기 위해 사용 하고 있습니다.

반응 앱 폴리 필

이 패키지에는 다양한 브라우저를위한 폴리 필이 포함되어 있습니다. 여기에는 React App 프로젝트 생성에 사용되는 최소 요구 사항 및 일반적으로 사용되는 언어 기능이 포함됩니다.

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