jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容，直到对话框移动或调整大小（但在 FF 和 Edge 中有效）

Question

这真的很奇怪。我有一个网站，它大量使用 jQuery UI 对话框来显示 iframe。 iframe 从网站本身加载内容，因此不存在来源问题。

在 FireFox 和 Edge 中完美运行。但是在 Chrome（我的版本是 87）中，它有时只会显示一个白色的空白对话框，直到您单击标题栏并移动它！或者，直到您打开开发者工具。

这让我非常抓狂，但如果其他人遇到同样的奇怪问题，我最终找到了两个解决方案（在下面发布）。

Answer 1

第一步：当 iframe 完成加载时，我必须添加一些代码。例如：

// if we are inside our iframe...
$(document).ready(function() { parent.nudgeiFrame(); });

这会调用正在加载对话框的 PARENT 页面上的一个函数，而不是从 iframe 本身内部调用函数！

解决方案 #1（不够优雅）

它会在短暂延迟后将整个对话框“微调”一个像素。这工作得非常好，但它有一个缺点，如果他们不断重新加载它，会使您的对话框在屏幕上缓慢移动。大多数用户可能永远不会注意到它，所以我暂时保留了这个选项：

function nudgeiFrame() {
  setTimeout(function() {
    $("div[role=dialog]").each(function() {
        
        $(this).addClass('ui-draggable-dragging');        
        $(this).addClass('ui-dialog-dragging');
        var y = $(this).css('top');
        var oldy = y;        
        y = parseFloat(y.replace("px", ""));        
        var newy = (y + 1) + "px";              
        $(this).css('top',  newy);
        
     });
  }, 75);
}

解决方案 #2（更优雅）

我发现（通过数小时的测试）我真正需要做的就是将内容添加到对话框（而不是 iframe）。

我决定添加一个简单的，这样它就不会导致对话框调整大小或类似的事情。信不信由你，这有效并且不会造成任何我能看到的不良影响。

function nudgeiFrame() {
  setTimeout(function() {
    $("div[role=dialog]").each(function() {
        
        $(this).append("<span></span>");

     });
  }, 75);
}

我希望这对外面的人有所帮助。我花了这么长时间才弄明白。

jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容，直到对话框移动或调整大小（但在 FF 和 Edge 中有效）

IFrame in jQuery UI dialog sometimes doesn't load content in Chrome until dialog is moved or resized (but works in FF and Edge)

javascript

jquery

dialog

google-chrome

jquery-ui