Question

我发现自己的位置如下。我有一个jQuery插件，需要嵌套在document.ready函数中。此插件将一些样式应用于页面的元素。受此插件影响的元素之一包含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。看看这个post

make document.ready考虑来自外部iframe的元素

2 个答案: