空弹出框随机出现，似乎来自 jQuery UI 对话框
Empty popup box shows up randomly and seems it's from jQuery UI dialog
有一个应用程序在使用 AngularJS 和 jQuery 的遗留工作流引擎上运行 uilt。一个空白的弹出框随机出现，我们必须手动关闭。此框主要在 drop-down 框被激活为 select 选项时显示。这个 drop-down 框是一个自定义组件，而不是一个简单的 HTML 选项元素。
请参阅下面的示例快照和相关弹出框的各个 HTML 部分。
我想知道是否有一种方法可以跟踪负责生成此框的代码。根据我的初步分析，它是由 jQuery Dialog UI 生成的。我注意到 jQuery 对话框的 CSS 没有加载，这就是为什么你看到一个基本的 none 格式框。
此外，如果您知道我们如何通过监视 DOM 的更改来终止此框，当场终止该部分。
编辑：我试图找出 jQuery 和 jQuery UI 是如何加载的，但找不到用于加载的直接方法，而是找到了一些参考资料根据下面的快照。看起来这个应用程序没有使用 header src 标签加载库。
我还注意到，当我尝试使用控制台显示 a simple jQuery Dialog 时，它会显示与随机弹出框完全相同的内容。当我从控制台为 jQuery UI 加载所需的 CSS 时，空弹出框将根据示例进行格式化。这个问题有没有可能是这个库缺少CSS引起的？
我使用网络选项卡和所有加载的源跟踪 jquery ui 的源代码，并在服务器上查找文件，只在某个缓存文件夹下找到了一个不相关 C:\Users\user-account\AppData\Local\Microsoft\Windows\INetCache\IE\YNOIZ1xyz\vengine-xyz[1].js。我也没有根据网络选项卡找到服务器上文件夹的路径。请参阅下面的相关屏幕截图。那么这个文件是如何加载网站资源的呢？
感谢您的帮助。
塔雷克
<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-9" aria-labelledby="ui-id-10"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-10" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-9" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-12" aria-labelledby="ui-id-13"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-13" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-12" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-71" aria-labelledby="ui-id-72" style="position: relative;height: auto;width: 300px;top: -1245px;left: 338.5px;display: block;"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-72" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-71" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
这将每 0.1 秒重复一次，并将搜索 class ui-dialog 并将其删除。
setInterval({
document.querySelector(".ui-dialog").remove();
}, 100);
试试这个。
将在评论中讨论过的寻找原始代码的有前途的方法作为记录它的答案。
第一个建议是将非缩小代码与非缩小 jqueryui 一起部署，并在浏览器中使用开发人员工具。在 jqueryUI 的对话框创建函数之一中设置断点，如 _create: function() 或 _init 方法。并在显示空白对话框之前查看哪个被击中。并查看调用堆栈并沿着堆栈向下移动，直到我们到达应用程序代码。
由于问题是自发发生的，因此决定从 JqueryUI 库中记录堆栈跟踪。我们可以修改jqueryUI库。不要使用 CDN，而是下载适当版本的非缩小 jqueryUI。然后在js文件里面，找到widget ui.dialog。然后放 console.trace(); _create 中的语句：function()。或者先调用哪个函数。我不知道是哪一个，但我们可以编写一小段代码并找出答案。
要确定正在使用哪个版本的库，请在浏览器中打开应用程序页面上的开发人员工具。在元素选项卡中执行 ctrl+f，然后搜索 jquery-ui。您会找到带有 js link 的标签。 i.stack.imgur.com/fEb3P.png
有一个应用程序在使用 AngularJS 和 jQuery 的遗留工作流引擎上运行 uilt。一个空白的弹出框随机出现，我们必须手动关闭。此框主要在 drop-down 框被激活为 select 选项时显示。这个 drop-down 框是一个自定义组件，而不是一个简单的 HTML 选项元素。
请参阅下面的示例快照和相关弹出框的各个 HTML 部分。
我想知道是否有一种方法可以跟踪负责生成此框的代码。根据我的初步分析，它是由 jQuery Dialog UI 生成的。我注意到 jQuery 对话框的 CSS 没有加载，这就是为什么你看到一个基本的 none 格式框。
此外，如果您知道我们如何通过监视 DOM 的更改来终止此框，当场终止该部分。
编辑：我试图找出 jQuery 和 jQuery UI 是如何加载的，但找不到用于加载的直接方法，而是找到了一些参考资料根据下面的快照。看起来这个应用程序没有使用 header src 标签加载库。
我还注意到，当我尝试使用控制台显示 a simple jQuery Dialog 时，它会显示与随机弹出框完全相同的内容。当我从控制台为 jQuery UI 加载所需的 CSS 时，空弹出框将根据示例进行格式化。这个问题有没有可能是这个库缺少CSS引起的？
我使用网络选项卡和所有加载的源跟踪 jquery ui 的源代码，并在服务器上查找文件，只在某个缓存文件夹下找到了一个不相关 C:\Users\user-account\AppData\Local\Microsoft\Windows\INetCache\IE\YNOIZ1xyz\vengine-xyz[1].js。我也没有根据网络选项卡找到服务器上文件夹的路径。请参阅下面的相关屏幕截图。那么这个文件是如何加载网站资源的呢？
感谢您的帮助。
塔雷克
<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-9" aria-labelledby="ui-id-10"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-10" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-9" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
<div tabindex="-1" role="dialog" style="position: relative; height: auto; width: 300px; top: -396px; left: 589px; display: block;" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-12" aria-labelledby="ui-id-13"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-13" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-12" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-draggable ui-resizable" aria-describedby="ui-id-71" aria-labelledby="ui-id-72" style="position: relative;height: auto;width: 300px;top: -1245px;left: 338.5px;display: block;"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-72" class="ui-dialog-title"> </span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div e-dialog="'selectDashboardDialog'" e-dialog-title="selectDashboard.title" e-dialog-desc="selectDashboard.desc" options="{dialogClass:'selectDashboardDialog', width: 'auto', draggable:false, position: 'lef top'}" class="width100 ng-scope ui-dialog-content ui-widget-content" e-select-dashboard-pane="" id="ui-id-71" style="display: block; width: auto; min-height: 109px; max-height: none; height: auto;"></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div>
这将每 0.1 秒重复一次，并将搜索 class ui-dialog 并将其删除。
setInterval({
document.querySelector(".ui-dialog").remove();
}, 100);
试试这个。
将在评论中讨论过的寻找原始代码的有前途的方法作为记录它的答案。
第一个建议是将非缩小代码与非缩小 jqueryui 一起部署，并在浏览器中使用开发人员工具。在 jqueryUI 的对话框创建函数之一中设置断点，如 _create: function() 或 _init 方法。并在显示空白对话框之前查看哪个被击中。并查看调用堆栈并沿着堆栈向下移动，直到我们到达应用程序代码。
由于问题是自发发生的，因此决定从 JqueryUI 库中记录堆栈跟踪。我们可以修改jqueryUI库。不要使用 CDN，而是下载适当版本的非缩小 jqueryUI。然后在js文件里面，找到widget ui.dialog。然后放 console.trace(); _create 中的语句：function()。或者先调用哪个函数。我不知道是哪一个，但我们可以编写一小段代码并找出答案。
要确定正在使用哪个版本的库，请在浏览器中打开应用程序页面上的开发人员工具。在元素选项卡中执行 ctrl+f，然后搜索 jquery-ui。您会找到带有 js link 的标签。 i.stack.imgur.com/fEb3P.png