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

Posted 2023-05-08

【中文标题】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)

【发布时间】：2021-04-28 16:15:20

【问题描述】：

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

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

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

【参考方案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);

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