javascript - 除非开发工具打开,否则 Bootstrap 模式不会在 IE11 中显示

标签 javascript jquery twitter-bootstrap bootstrap-modal durandal-2.0

我有一个使用 Durandal.js 创建的单页应用程序,并且我在调试 IE11 和 Durandal 的 app.showMessage(...) 问题时遇到了很大的麻烦。和app.showDialog(...)方法。目前,该应用程序在 Chrome、FireFox 以及 IE 9 和 10 中运行良好,但在 IE11 中,我遇到了一个问题:尝试通过 app.showDialog(...) 调用对话框时,我的应用程序挂起。 。如果我在进入我的应用程序之前打开开发工具,一切都会运行得很好。如果我尝试访问该应用程序,请运行导致 app.showDialog 的代码触发,然后打开开发工具并尝试运行相同的代码,我确实可以访问正在发生的错误,但这并不是很有帮助。实际错误读取为 SCRIPT5007: Unable to get property 'name' of undefined or null reference它位于File: system.js, Line: 90, Column: 13 。 system.js 该区域的代码与 Durandal 的 logError 相关。方法如下所示:

var logError = function(error) {
    if(error instanceof Error){
        throw error;
    }
    throw new Error(error);
};

错误堆栈显示为所附图像中包含的内容(位于我的问题的底部)。抱歉,我必须使用警报来获取完整的错误堆栈,否则记录的版本将被 chop 。

我还尝试了一些方法,包括确保我的文档类型正确地贴有 <!DOCTYPE html>在我的 index.html 文件的顶部,我添加了 <meta http-equiv="X-UA-Compatible" content="IE=edge">到index.html,我还尝试添加自己的控制台对象,以通过我在此处找到的以下脚本捕获可能仍在应用程序中的任何调试代码:https://stackoverflow.com/a/12307201/4367226

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        alert("There isn't a console!");
        var console = {
            log: function( x ){},
            warn: function( x ){},
            error: function( err ){
                alert( "Error from console object:" );
                alert( err );
                alert( err.stack );
            },
            time: function(){},
            timeEnd: function(){}
        };
    }
</script>

我还通过添加来确保应用程序具有“缓存破坏程序”(与 https://stackoverflow.com/a/25170531/4367226 相关)

$.ajaxSetup({cache:false});

到我的应用程序。

我还尝试删除 fade从我的模态中调用但没有成功(如此处建议的: https://stackoverflow.com/a/25717025/4367226 )。

更多详细信息 - 该应用正在运行 Durandal 2.0.1、Twitter Bootstrap 2.3.2 和 jQuery 1.10.2。

任何帮助将不胜感激,如果我可以帮助澄清任何事情,请告诉我。

更新

经过进一步调查和调试,我已经能够在 bootstrap-modalmanager.js 中找到有问题的代码行。文件的 init 方法,它与 jQuery 相关(所以我将该标签添加回我的问题):

init: function (element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);
        this.stack = [];
        this.backdropCount = 0;

        if (this.options.resize) {
            var resizeTimeout,
                that = this;

            $(window).on('resize.modal', function(){
                resizeTimeout && clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function(){
                    for (var i = 0; i < that.stack.length; i++){
                        that.stack[i].isShown && that.stack[i].layout();
                    }
                }, 10);
            });
        }
    },

this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options); 行中从上面this.$element.data()有点似乎把事情搞砸了。这就是错误的来源,但我不知道为什么它可以在打开的开发工具下工作,但否则会抛出错误。

更新2

经过继续挖掘,我发现 jQuery 1.10.2 的 jQuery.fn.extend功能坏了。该函数将尝试迭代元素的属性和这部分代码:name = attrs[i].name;将允许代码尝试访问 name (有时在 IE11 中)nullundefined值 - 因此我看到了错误。该代码已在 jQuery 1.11.3 中修复(它甚至引用了有时 IE11 的 attrs 元素在代码中可以为 null 的事实),但不幸的是升级版本破坏了我的应用程序中的其他内容,因此我替换了 jQuery 1.10 .2的jQuery.fn.extend函数与1.11.3版本的函数同名。

error callstack

最佳答案

经过很多很多小时的调试,我找到了问题的原因。它与 jQuery 1.10.2 的 jQuery.data 函数相关。在该函数中,有一个 for 循环,它迭代元素的属性并尝试访问(有时在 IE11 中)nullundefined.name > 值。

该错误已在 jQuery 1.11.3 版本的 jQuery.data 中修复,但不幸的是,我无法在不破坏应用程序其他部分的情况下使用 jQuery 的完整升级版本。相反,我只是将 jQuery 1.10.2 的 jQuery.data 函数替换为 jQuery 1.11.3 的更新版本。

这不是最好的解决方案(我宁愿不必破解 jQuery 的核心并在我的应用程序中添加 Frankenstein 代码),但它确实有效。

我仍然很困惑为什么我的旧代码在开发工具打开的情况下在 IE11 中运行良好,但在其他情况下会失败。也许开发工具在 body 元素的属性中添加了一些内容来防止错误发生?

关于javascript - 除非开发工具打开,否则 Bootstrap 模式不会在 IE11 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30246009/

相关文章:

javascript - 悬停时平滑过渡

html - 应用 Bootstrap 后,导航栏的下拉菜单在 meteor 中不起作用

javascript - 当我的字符数达到特定数字时使用 jQuery 更改文本

javascript - 当我刷新页面时,它会将我重定向到登录页面

javascript - 我的 Javascript 应该在点击时加载一个 CSS,但同时加载了两个

javascript - 设置变量,而不是让最终用户从 html 表单输入变量

javascript - 当用户动态添加文本框时回显文本框中的值

jquery - 更改 iFrame 的字体大小和字体系列

jQuery 克隆元素和 insertAfter

javascript - Bootstrap - 减少文本框和标签等表单控件之间的间距