【问题标题】:Why does Telerik cdn not work in IE?为什么 Telerik cdn 在 IE 中不起作用?
【发布时间】:2016-05-17 05:45:11
【问题描述】:

这是一个非常愚蠢和业余的问题,但我在我的演示网站中使用了 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 --%>

我在&lt;head&gt;标签中添加了链接,代码在&lt;body&gt;标签中,为简洁起见,我删除了一些额外的代码。

【问题讨论】:

  • 成功了吗?还有其他错误吗?
  • 是的,效果很好!谢谢

标签: javascript internet-explorer dojo telerik cdn


【解决方案1】:

来自 Telerik 官方网站

Kendo 小部件提供 WAI-ARIA 支持,这意味着某些 特定于 ARIA 的属性被添加到 HTML 元素中。当一个小部件 尝试使用 jQuery 的 attr 方法添加 ARIA 属性,该方法在 依次调用 Element.setAttribute 方法,在 Internet Explorer 中 兼容模式将引发 JavaScript 错误,并显示以下内容 留言:

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

解决方案:

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

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

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


欲了解更多信息,请访问这里Official Telerik

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-11-24
    • 1970-01-01
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-09
    • 2011-12-10
    相关资源
    最近更新 更多