'window.location.hash.includes'를 사용하면 IE11에서 "개체가 속성 또는 메서드 'includes'를 지원하지 않습니다"가 발생합니다.


173

?창에서 해시 팝 상태를 제어 하기 위해 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')});
            };
        });
});

window.location.hashInternet Explorer 11 의 가치는 무엇입니까 ?
nils

답변:


242

에 따르면 MDN 참조 페이지 , includes인터넷 익스플로러에서 지원되지 않습니다. 가장 간단한 대안은 indexOf다음과 같이 를 사용하는 것입니다.

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

1
이제는 잘 작동하지 않습니다 if (window.location.hash.indexOf ( "?")> = 0) {// 아무것도} else {location.href = location.href + '?'; }
Erik Grosskurth 2016 년

추가해야합니까? URL이없는 경우 URL 끝까지
Erik Grosskurth

1
나는 이것이 오래된 질문과 대답이라는 것을 알고 있지만 String.prototype.includes는 Windows 10 IE 11에서 나를 위해 작동하는 것 같습니다.
troxwalt

2
@troxwalt 잘 들리지만 여전히 Windows 7 IE11에서는 작동하지 않습니다!
nevada_scout

당신이 경우 반응 보내고, 당신은 사용할 수 있습니다 polyfill 패키지를 수동으로 polyfills를 추가하고 피하기를 ...
CPHPython

58

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

출처 : 폴리 필 소스


1
: 당신은 또한 여기 코어 JS에서 polyfill 사용할 수 github.com/zloirock/core-js#stage-4-proposals
데이비드 바레토


36

import 'core-js/es7/array';polyfill.ts문제를 추가 하면 문제가 해결되었습니다.


이것은 오래 전에 게시되었지만 어쩌면 이것이 새로운 프레임 워크의 누군가에게 도움이 될 수는 있지만 선택한 답변은 특별한 유스 케이스 이외의 모든 것으로 충분하다고 생각합니다.
Erik Grosskurth

1
import 'core-js / es / array'; 2020 년 기준
timhc22

14

Angular 프로젝트와 비슷한 문제가있었습니다. 내 polyfills.ts에서 두 가지를 모두 추가해야했습니다.

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

다른 모든 IE 11 기본값을 활성화하는 것 외에도. (각도를 사용하는 경우 polyfills.ts의 주석 참조)

이러한 가져 오기를 추가하면 오류가 사라지고 내 오브젝트 데이터가 의도 한대로 채워집니다.


이것은 나를 위해 일했습니다. 어쨌든 그 두 수입품은 무엇을합니까? 그리고 어떤 수입품이 포함 오류를 수정 했습니까?. 또는 둘 다 포함 오류에 대한 것입니까?
iamjoshua

IE11은 더 이상 Microsoft의 기능 업데이트를 수신하지 않으므로 javascript 구현은 날짜가 지정되었으며 ES5를 통한 메소드 만 지원합니다. 이 두 파일을 가져 오면 'includes'메소드를 포함하는 ES7을 통해 Array 및 Object에 대한 폴리 필 스크립트를 추가하게됩니다.
she

5

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


1

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


1
IE11 콘솔에서 실패한 모든 기능을 수동으로 폴리 필하기 시작했습니다. 시간 절약 답변을 주셔서 감사합니다. package.json에 두 개의 패키지를 한 번에 추가하려면 다음을 수행하십시오 .npm i --save core-js react-app-polyfill
CPHPython

Btw 는 Github에서 제안한 것처럼core-js/es6 v3에는 더 이상 존재하지 않는 것 같습니다 . import 'core-js';
CPHPython

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.