为什么 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 mode:add head 部分中的下面这一行，使浏览器使用最新版本的 internet explorer Edge 模式

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

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

有关详细信息，请访问此处 Official Telerik

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

Why does Telerik cdn not work in IE?

javascript

dojo

internet-explorer

cdn

telerik