时间戳

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

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

问题描述

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

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

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

标签： javascriptjquerygoogle-chromejquery-uidialog

解决方案

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

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

这会调用父页面上的一个函数，该函数正在加载对话框，而不是来自 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);
}

我希望这可以帮助那里的人。我花了这么长时间才弄清楚。

推荐阅读