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

Why does Telerik cdn not work in IE?

本文关键字:不起作用 IE Telerik cdn 为什么      更新时间:2023-09-26

这是一个非常愚蠢和业余的问题,但我在演示网站中使用了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>标签中,为了简洁起见,我删除了一些额外的代码。

来自telerik官方网站

Kendo小部件提供WAI-ARIA支持,这意味着ARIA特定的属性被添加到HTML元素中。当小部件尝试使用jQuery的attr方法添加ARIA属性,该方法在turn调用Element.setAttribute方法兼容模式将引发以下JavaScript错误消息:

SCRIPT3:未找到成员(在兼容的Internet Explorer 10+中模式)问题已在上报告给Microsofthttps://connect.microsoft.com/IE/feedback/details/774078.还有是一个jQuery错误报告,可以在其中找到更多信息。

解决方案:

选项1-强制Internet Explorer使用边缘模式:在标题部分添加以下行,使浏览器使用最新版本的Internet Explorer边缘模式

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

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


欲了解更多信息,请访问此处Official Telerik