Mã không chạy trong IE 11, hoạt động tốt trong Chrome

156

Mã sau có thể được chạy mà không gặp sự cố trong Chrome, nhưng đưa ra lỗi sau trong Internet Explorer 11.

Đối tượng không hỗ trợ thuộc tính hoặc phương thức 'startedWith'

Tôi đang lưu trữ ID của phần tử trong một biến. Vấn đề là gì?

function changeClass(elId) {
  var array = document.getElementsByTagName('td');
  
  for (var a = 0; a < array.length; a++) {
    var str = array[a].id;
    
    if (str.startsWith('REP')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    } else if (str.startsWith('D')) {
      if (str == elId) {
        array[a].style.backgroundColor = "Blue";
        array[a].style.color = "white";
      } else {
        array[a].style.backgroundColor = "";
        array[a].style.color = "";
      }
    }
  }
}

<table>
  <tr>
    <td id="REP1" onclick="changeClass('REP1');">REPS</td>
    <td id="td1">&nbsp;</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D1" onclick="changeClass('D1');">Doors</td>
  </tr>
  <tr>
    <td id="td1">&nbsp;</td>
    <td id="D12" onclick="changeClass('D12');">Doors</td>
  </tr>
</table>

Mở rộng đoạn trích

javascript html

— Pháp Bhushan
nguồn

9

Bạn có thể sẽ cần sử dụng str.indexOf("REP") == 0cho IE thay thế.

— Grant Thomas

1

ES6 chưa một tiêu chuẩn kangax.github.io/compat-table/es6 Có một ES6 shim thư viện để giúp quá trình chuyển đổi github.com/paulmillr/es6-shim Cũng giống như đối với ES5 (kể cả không phải mọi thứ là shimmable)

— Xotic750

320

String.prototype.startsWith là một phương thức tiêu chuẩn trong phiên bản JavaScript mới nhất, ES6.

Nhìn vào bảng tương thích bên dưới, chúng ta có thể thấy rằng nó được hỗ trợ trên tất cả các nền tảng chính hiện tại, ngoại trừ các phiên bản của Internet Explorer.

╔═══════════════╦════════╦═════════╦═══════╦═══════════════════╦═══════╦════════╗
║    Feature    ║ Chrome ║ Firefox ║ Edge  ║ Internet Explorer ║ Opera ║ Safari ║
╠═══════════════╬════════╬═════════╬═══════╬═══════════════════╬═══════╬════════╣
║ Basic Support ║    41+ ║     17+ ║ (Yes) ║ No Support        ║    28 ║      9 ║
╚═══════════════╩════════╩═════════╩═══════╩═══════════════════╩═══════╩════════╝

Bạn sẽ cần phải tự thực hiện .startsWith. Đây là polyfill :

if (!String.prototype.startsWith) {
  String.prototype.startsWith = function(searchString, position) {
    position = position || 0;
    return this.indexOf(searchString, position) === position;
  };
}

— Ôi
nguồn

3

có một triển khai khác tại các tài liệu web MDN

String.prototype.startsWith = function(search, pos) {          return this.substr(!pos || pos < 0 ? 0 : +pos, search.length) === search;     };

— oCcSking

1

Tôi có xu hướng thực hiện đầu tiên như được đưa ra bởi @Oka. Cũng giống như một sàng lọc bổ sung, người ta có thể kiểm tra "vị trí" có thực sự là số: vị trí =! IsNaN (parseInt (vị trí)) không? vị trí: 0;

— ErnestV

36

text.indexOf("newString")là phương pháp tốt nhất thay vì startsWith.

Thí dụ:

var text = "Format";
if(text.indexOf("Format") == 0) {
    alert(text + " = Format");
} else {
    alert(text + " != Format");
}

— Jona
nguồn

Tại sao nó là phương pháp tốt nhất?

— TylerH

1

Phương thức indexOf không thay thế cho startWith, indexOf sẽ trả về giá trị nếu nó khớp với bất kỳ vị trí nào trong chuỗi đã cho, tôi không đề xuất sử dụng indexOf.

— RajKumar Samala

12

indexOfkhông trả về giá trị, nhưng @Jona đã kiểm tra giá trị trả về bằng 0 (tức là chuỗi ở đầu), có nghĩa là nó là một sự thay thế tốt cho startsWith!

— SharpC

Đây là chức năng tương tự như polyfill mà không cần phải thêm polyfill hoặc mang thêm thư viện. Đó là một giải pháp tuyệt vời - nhược điểm duy nhất tôi có thể thấy có lẽ là khả năng đọc mã - ý định rõ ràng hơn khi chức năng được đặt tên bắt đầu với.

— John T

13

Nếu điều này xảy ra trong ứng dụng Angular 2+, bạn chỉ có thể bỏ ghi chú chuỗi polyfills trong polyfills.ts :

import 'core-js/es6/string';

— Vitaliy Ulantikov
nguồn

Tôi đã thêm bản sửa lỗi polyfill của Oka, nhưng nó không hoạt động với tôi trên ứng dụng Angular 5 của tôi, nhưng đã import 'core-js/es6/string';sửa nó. Cảm ơn nhiều!

— decebal

5

Thay thế hàm startedWith bằng:

yourString.indexOf(searchString, position) // where position can be set to 0

Điều này sẽ hỗ trợ tất cả các trình duyệt bao gồm IE

Vị trí có thể được đặt thành 0 cho khớp chuỗi từ vị trí 0 có nghĩa là bắt đầu.

— Quần soóc
nguồn

Giải pháp hữu ích mà không phải viết lại nguyên mẫu cũng như không sử dụng polyfill. Thêm vào đó, nó tương thích rộng giữa các trình duyệt. +1

— Sergio A.

2

Như những người khác đã nói bắt đầu với và kết thúc Với một phần của ES6 và không có sẵn trong IE11. Công ty chúng tôi luôn sử dụng thư viện lodash như một giải pháp polyfill cho IE11. https://lodash.com/docs/4.17.4

_.startsWith([string=''], [target], [position=0])

— mbokil
nguồn

0

Trong khi bài viết của Oka đang hoạt động rất tốt, nó có thể hơi lỗi thời. Tôi đã tìm ra rằng lodash có thể giải quyết nó bằng một chức năng duy nhất. Nếu bạn đã cài đặt lodash, nó có thể giúp bạn tiết kiệm một vài dòng.

Cứ thử đi:

import { startsWith } from lodash;

. . .

    if (startsWith(yourVariable, 'REP')) {
         return yourVariable;        
    return yourVariable;
       }      
     }

— TheGabornator
nguồn

0

Gần đây tôi cũng phải đối mặt với thăm dò. Tôi đã giải quyết bằng cách sử dụng ^ tương tự như startwith in jquery. Nói,

var str = array[a].id;
if (str.startsWith('REP')) {..........}

chúng ta có thể sử dụng

if($("[id^=str]").length){..........}

Ở đây, str là id của phần tử.

— Học tập của người dùng
nguồn

0

Thực hiện theo phương pháp này nếu có vấn đề xảy ra khi làm việc với các dự án angular2 +

Tôi đã tìm kiếm một giải pháp khi tôi gặp lỗi này và nó đã đưa tôi đến đây. Nhưng câu hỏi này có vẻ cụ thể nhưng lỗi thì không, đó là lỗi chung. Đây là một lỗi phổ biến cho các nhà phát triển góc cạnh giao dịch với Internet Explorer.

Tôi gặp vấn đề tương tự khi làm việc với 2+ góc cạnh và nó đã được giải quyết chỉ bằng vài bước đơn giản.

Trong các phiên bản mới nhất của Angular, có các mã nhận xét trong polyfills.ts hiển thị tất cả các polyfill cần thiết để chạy trơn tru trong các phiên bản Internet Explorer IE09, IE10 và IE11

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
//import 'core-js/es6/symbol';
//import 'core-js/es6/object';
//import 'core-js/es6/function';
//import 'core-js/es6/parse-int';
//import 'core-js/es6/parse-float';
//import 'core-js/es6/number';
//import 'core-js/es6/math';
//import 'core-js/es6/string';
//import 'core-js/es6/date';
//import 'core-js/es6/array';
//import 'core-js/es6/regexp';
//import 'core-js/es6/map';
//import 'core-js/es6/weak-map';
//import 'core-js/es6/set';

Bỏ ghi chú mã và nó sẽ hoạt động hoàn hảo trong trình duyệt IE

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Nhưng bạn có thể thấy hiệu suất trong trình duyệt IE giảm so với các trình duyệt khác :(

— jithin john
nguồn