将以下代码段保存为foo.html并使用chrome和firefox打开它，然后按＆＃34;测试＆＃34;按钮（这会导致整个文档从头开始重写），最后按下＆＃34;栏＆＃34;弹出的对话框上的按钮。
<!doctype html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- util service -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script> <!-- util service -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <!-- util service -->
<!-- util service -->
<script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"></script>
<script>
document.open("text/html", "replace");
document.write("" +
"<!doctype html>" +
"<html>" +
"<head>" +
' <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">' +
"</head>" +
"<body>" +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"><' + '/script>' +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"><' + '/script>' +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"><' + '/script>' +
' <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"><' + '/script>' +
" <script>" +
" UtilService.foo({" +
" buttons: [" +
" {" +
' text: "bar",' +
' click: function () {' +
' console.log($(this).data("ui-dialog"));' +
' $(this).dialog("close");' +
' }' +
' }' +
' ]' +
' });' +
" <" + "/script>" +
"<body>" +
"</html>"
);
document.close();
</script>
</body>
</html>
上面的代码段使用名为＆＃39; dummyUtilService.js的小型实用程序服务。这项服务非常简单：
if (!window.UtilService)
{
(function (self, $, undefined) {
"use strict";
self.foo = function (config) {
return $("<div>").dialog(config);
};
}(window.UtilService = window.UtilService || {}, jQuery));
}
只要＆＃39; if（！window.UtilService）＆＃39;在按下＆＃34; bar＆＃34;时，在chrome / firefox下出现问题。按钮：
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
at Function.error (https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:253:9)
at HTMLDivElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:246:16)
at Function.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:370:19)
at jQuery.fn.init.each (https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:137:17)
at jQuery.fn.init.$.fn.(anonymous function) [as dialog] (https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:236:10)
at HTMLDivElement.click (file:///C:/Users/sido6001/Desktop/foo.html:42:578)
at HTMLButtonElement.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:12443:12)
at HTMLButtonElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:5226:27)
at HTMLButtonElement.elemData.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:4878:28)
如果我们发表评论＆＃39; if（！window.UtilService）＆＃39;然后在chrome下一切正常。 Firefox无论如何都不关心 - 无论是否（！window.UtilService）＆＃39;是否已注释掉。
为什么＆＃39; $（this）.data（＆＃34; ui-dialog＆＃34;）＆＃39;返回＆＃39; undefined＆＃39;从而导致.dialog（＆＃34;关闭＆＃34;）稍后崩溃？ [*]
[*]就我的分析而言.dialog（＆＃34; close＆＃34;）崩溃，因为内部调用了＆＃39; $（this）.data（＆＃34; ui-dialog＆＃34 ;）＆＃39;返回undefined。
更新：我注意到如果原始代码被调整为包含一个触发文档替换过程的按钮，那么该机制在firefox下开始工作正常但它仍然在chrome中崩溃。考虑到这种变化有多么微妙，我的脖子后面的头发现在站起来，但它在两个主流浏览器中引发了不同的反应：S
<!doctype html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
</head>
<body>
<button>Test</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- util service -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script> <!-- util service -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <!-- util service -->
<!-- util service -->
<script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"></script>
<script>
$("button").on("click", function() {
document.open("text/html", "replace");
document.write("" +
"<!doctype html>" +
"<html>" +
"<head>" +
' <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">' +
"</head>" +
"<body>" +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"><' + '/script>' +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"><' + '/script>' +
' <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"><' + '/script>' +
' <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"><' + '/script>' +
" <script>" +
" UtilService.foo({" +
" buttons: [" +
" {" +
' text: "bar",' +
' click: function () {' +
' console.log($(this).data("ui-dialog"));' +
' $(this).dialog("close");' +
' }' +
' }' +
' ]' +
' });' +
" <" + "/script>" +
"<body>" +
"</html>"
);
document.close();
});
</script>
</body>
</html>