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

Posted 2023-05-09

【中文标题】使 document.ready 考虑来自外部 iframe 的元素

【英文标题】：Make document.ready take into account elements from external iframe

【发布时间】：2013-04-22 12:43:40

【问题描述】：

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

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

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

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

【参考方案1】：

只有文档有 ready() 事件，对于 iFrame 来说，它会是 onload ：

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

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

【讨论】：

如果 iframe 在另一个域上，该加载事件是否仍会触发？

@jmort253 - 你为什么不试试呢？

我真的不需要访问 iframe，但我必须知道它的高度以及加载的内容才能使插件工作。

@LeeTaylor - 正如我们所说的那样。然而，我想说的是，我认为不会。

你只会得到在 CSS 中设置的 iFrame 元素的高度，你真的不需要等待它加载来做到这一点？

【参考方案2】：

解决办法是$.holdReady();

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

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

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