javascript - 使 document.ready 考虑来自外部 iframe 的元素

Question

我发现自己的位置如下。我有一个需要嵌套在document.ready函数中的 jQuery 插件。此插件将一些样式应用于页面元素。受此插件影响的元素之一包含 iframe。这个 iframe 不是来自我的网站。问题是它document.ready没有考虑 iframe 的内容，当它被加载时，它的高度会发生变化，但是在此之前已经应用了 jQuery 插件，因此页面的布局被搞砸了。

我尝试了以下方法以确保仅在文档准备好并且 iframe 也准备好时调用插件：

$(document).ready(function() {
    $('#frameId').ready(function() {
    //plugin code
    });
});

但这不起作用，我正在寻找另一种解决方案。

Answer 1

只有文档有一个ready()事件，对于 iFrame，它将是 onload ：

$(document).ready(function() {
    $('#frameId').on('load', function() {
    //plugin code
    });
});

但是为什么你的插件需要访问 iFrame 呢？

Answer 2

解决方案是$.holdReady();

$.holdReady(true);
$(document).ready(function() {
    //plugin code
});

$('#frameId').on('load', function() {
   $.holdReady(false);
});

要访问跨域 iFrame 内容的高度，您需要 postMessage。看看这个帖子