如何解决jQuery UI 对话框中的 IFrame 有时不会在 Chrome 中加载内容,直到对话框移动或调整大小但适用于 FF 和 Edge
这真的很奇怪。我有一个网站,它大量使用 jQuery UI 对话框来显示 iframe。 iframe 从网站本身加载内容,因此不存在来源问题。
在 FireFox 和 Edge 中完美运行。但是在 Chrome(我的版本是 87)中,它有时只显示一个白色的空白对话框,直到您单击标题栏并移动它!或者,直到您打开开发者工具。
这让我非常疯狂,但如果其他人遇到同样奇怪的问题,我最终找到了两个解决方案(在下面发布)。
解决方法
第一步: 当 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);
}
我希望这对那里的人有所帮助。花了我很长时间才弄明白。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。