除非开发工具开放,否则IE11中不显示引导模式

时间:2015-05-14 19:45:26

标签: 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处的错误为logError。 system.js的那个区域的代码与Durandal的var logError = function(error) { if(error instanceof Error){ throw error; } throw new Error(error); }; 方法有关,它看起来像这样:

<!DOCTYPE html>

错误堆栈显示为附加图像(位于我的问题底部)。抱歉,我不得不使用警报来获取完整的错误堆栈,否则记录的版本将被截止。

我还尝试了一些方法,包括确保我的doctype在我的index.html文件顶部使用<meta http-equiv="X-UA-Compatible" content="IE=edge">进行了正确的decalred,我已将<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> 添加到index.html,我也尝试过添加我自己的控制台对象,通过我在此处找到的以下脚本捕获可能仍在应用程序中的任何调试代码:https://stackoverflow.com/a/12307201/4367226

$.ajaxSetup({cache:false});

我还确保该应用有一个&#34;缓存破坏者&#34; (通过添加

https://stackoverflow.com/a/25170531/4367226相关)
fade

到我的应用程序。

我还试图从我的模态中删除bootstrap-modalmanager.js类但没有成功(如此处所示:https://stackoverflow.com/a/25717025/4367226)。

更多细节 - 该应用程序正在运行Durandal 2.0.1,Twitter Bootstrap 2.3.2和jQuery 1.10.2。

如果我能帮助澄清任何问题,我们将非常感谢您的帮助。

更新

经过进一步调查和调试后,我能够在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); }); } }, 文件的init方法中找到有问题的代码行,并且它与jQuery相关(所以我将该标记添加回我的问题):

this.options = $.extend({}, $.fn.modalmanager.defaults, this.$element.data(), typeof options == 'object' && options);

在从上方读取this.$element.data()的行中,jQuery.fn.extend位似乎在吹嘘。这就是错误来自的地方,但我不知道为什么它可以在dev工具打开的情况下工作,否则会抛出错误。

更新2

继续挖掘之后,我发现jQuery 1.10.2的name = attrs[i].name;功能被破坏了。该函数将尝试迭代元素的属性,代码的这一部分:name将允许代码尝试访问a的null(有时在IE11中){{1} }或undefined值 - 因此我看到的错误。该代码已在jQuery 1.11.3中得到修复(它甚至引用了有时IE11的attrs元素在代码中可能为null的事实),但遗憾的是升级后的版本在我的应用程序中打破了其他东西,所以我已经替换了jQuery 1.10 .2&#39; jQuery.fn.extend函数与版本1.11.3的同名函数。

error callstack

1 个答案:

答案 0 :(得分:2)

经过多次,多小时的调试后,我找到了问题的原因。它与jQuery 1.10.2的jQuery.data函数有关。在该函数中,有一个for循环遍历元素的属性,并尝试访问({有时在IE11中).namenull值的undefined

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

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

我仍然感到困惑的是,为什么我的旧代码在开放式开发工具的IE11中运行良好,但否则会失败。也许开发工具为body元素的属性添加了一些东西,以防止错误发生?