javascript - 为什么 Telerik cdn 在 IE 中不起作用？

Question

这是一个非常愚蠢和业余的问题，但我在我的演示网站中使用了 Telerik 的 CDN，它在除 IE 之外的任何地方都有效，我想知道为什么会这样。

我包含了所有的文件，比如

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css" />    
<script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>

如您所见，我尝试像他们在他们的 dojo 示例中那样做，我也尝试添加“http://”，但文件似乎仍未在 IE 中加载，我想知道为什么会这样因为代码似乎在其他任何地方都可以完美运行，如果我给它一个本地源代码，它也可以在 IE 中运行，我只是想知道为什么 CDN 不能在 IE 中运行，我是否遗漏了一些非常基本的东西？

剩下的代码是

 <%-- Main Body --%>
<form id="form1" >
    <div id="grid"></div>
</form>
<%--End of Main Body --%>
<%-- Scripts --%>
<script>

    var crudServiceBaseUrl = "http://localhost:50371/api";
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            change: function (e) {
                if (e.action == "itemchange") {
                    if (e.field == "MonthsOfSalary" || e.field == "Salary") {
                        var item = e.items[0];
                        item.trigger("change", { field: "NetSalary" })
                    }
                }

            },
            transport: {
                read: {
                    url: crudServiceBaseUrl + "/CarDetails/GetCarDetails",
                    dataType: "json",
                    type: "GET"
                },
                update: {
                    url: crudServiceBaseUrl + "/CarDetails/UpdateCarDetails",
                    dataType: "json",
                    contentType: "application/json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: function (data) {
                        return data.models;
                    }
                },
                destroy: {
                    url: crudServiceBaseUrl + "/CarDetails/DeleteCarDetails",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: function (data) {
                        return data.models;
                    }
                },
                create: {
                    url: crudServiceBaseUrl + "/CarDetails/AddCarDetails",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: function (data) {
                        return data.models;
                    }
                },

                parameterMap: function (data, operation) {
                    if (operation === "update" || operation === "create" || operation === "destroy") {
                        return JSON.stringify(data.models);
                    }
                    return data;
                }
            },
            batch: true,

            schema: {
                model: {
                    id: "DetailId",
                    Total: function () {
                        return this.get("MonthsOfSalary") * this.get("Salary");
                    },
                    fields: {
                        "DetailId": { editable: false, type: "number", nullable: false, validation: { required: true } },
                        "CarsId": { editable: false, type: "number", nullable: false, defaultValue: 1, validation: { required: true } },
                        "FirstName": { type: "string", nullable: false, validation: { required: true, required: { message: "Enter a First Name" } }, defaultValue: "First" },
                        "LastName": { type: "string", nullable: false, validation: { required: true, required: { message: "Enter a Last Name" } }, defaultValue: "Last" },
                        "PhoneNumber": { type: "number", nullable: false, validation: { required: true, min: 1000000000, max: 9999999999, required: { message: "Entera ten digit number" } }, defaultValue: 1111111111 },
                        "Email": { type: "string", nullable: false, validation: { email: true, email: { message: "Enter Email in a@a.com Format" }, required: true, required: { message: "Enter an Email" } }, defaultValue: "e@mail.com" },
                        "MonthsOfSalary": { type: "number", nullable: false, validation: { required: true, min: 1, max: 48, required: { message: "Enter a number between 1 & 48" } }, defaultValue: 1 },
                        "Salary": { type: "number", nullable: false, validation: { required: true, min: 1, max: 10000000, required: { message: "Enter a number between 1 & 1,00,00,000" } }, defaultValue: 1 },
                        "NetSalary": { editable: false, type: "number", nullable: false, validation: { required: true, min: 1, max: 480000000, required: { message: "Enter a number between 1 & 48,00,00,000" } }, defaultValue: 1 },
                        "CarName": { editable: true, type: "string", nullable: false, validation: { required: true }, defaultValue: "Ford" },
                        "CarColor": { editable: false, type: "string", nullable: false, validation: { required: true }, defaultValue: "Red" },
                        "BirthDate": { type: "date", nullable: false, validation: { required: true, required: { message: "Enter a Date" }, min: new Date(1989, 01, 01), max: new Date(), date: { message: "Enter a Valid Date" } }, defaultValue: new Date() },
                        "Car": { nullable: false },
                    }
                }
            }
        });
        $(function () {


            var cars = [];

            $.get(crudServiceBaseUrl + "/Cars/GetCars", function (data, status) {

                cars = data;
            });
            $("#grid").kendoGrid({
                dataSource: dataSource,
                excel: {
                    fileName: "Kendo UI Grid Export.xlsx",
                    filterable: true
                },
                navigatable: true,
                pageable: false,
                height: 550,
                navigatable: true,
                groupable: true,
                filterable: true,
                columnMenu: true,
                reorderable: false,
                resizable: true,
                sortable: true,
                toolbar: ["create", "save", "cancel", "excel"],
                columns: [
                             {
                                 field: "CarName", title: "Car",
                                 editor: function (container, options) {
                                     $('<input data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                                         dataSource: {
                                             data: cars
                                         },
                                         dataValueField: "Color",
                                         dataTextField: "Name",
                                         autobind: true,
                                     });
                                 }
                             },
                             { title: "First Name", field: "FirstName" },
                             { title: "Last Name", field: "LastName" },
                             { title: "Phone Number", field: "PhoneNumber" },
                             { title: "Email", field: "Email" },
                             { title: "Months", field: "MonthsOfSalary" },
                             { title: "Salary", field: "Salary" },
                             { title: "Net Salary", field: "NetSalary", template: "#=Total() #"},
                             { title: "Joining Date", field: "BirthDate", format: "{0:dd MMM yyyy}" },
                              {
                                  title: "Select",
                                  template: "<input type='checkbox' />"
                              },
                             { command: [{ name: "destroy", text: "" }] }
                ],
                editable: {
                    editable: true,
                    confirmation: true
                },
            });
        });

    });

</script>
<%-- End of Scripts --%>

我在 <head> 中添加了链接标签和代码在 <body> 中标记，为简洁起见，我删除了一些额外的代码。

Answer 1

来自 telerik 官方网站

Kendo widgets provide a WAI-ARIA support, which means that some ARIA-specific attributes are added to the HTML element. When a widget tries to add an ARIA attribute using jQuery's attr method, which in turn calls the Element.setAttribute method, the Internet Explorer in Compatibility mode will raise a JavaScript error with the following message:

SCRIPT3: Member not found (in Internet Explorer 10+ in Compatibility Mode) The problem is reported to Microsoft on https://connect.microsoft.com/IE/feedback/details/774078. Also there is a jQuery bug report where more information can be found.

解决方案:

选项 1 - 强制 Internet Explorer 使用 Edge 模式:在 head 部分添加以下行，使浏览器使用最新版本的 Internet Explorer Edge 模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

选项 2 - 路径 jQuery。错误链接在这里 Bug Link

---

有关更多信息，请访问此处 Official Telerik