在前端开发中，我们经常需要嵌入其他网页的内容，这时候就需要用到 iframe 标签。但是有时候我们需要知道 iframe 是否已经加载完成或者它的内容是否可用。本文将介绍如何检查 iframe 是否加载或其内容，并提供相关示例代码。
检查 iframe 是否加载完成
当一个 iframe 加载完成后，我们可以通过监听 load 事件来获取通知。下面是一段示例代码：
-- -------------------- ---- ------- ----- ------ - ------------------------------------- -------- -------------- - ------------------- --------- - -- -------------------- - ---------------------------- -------------- - ---- - ------------- - ------------- -
上述代码首先获取了 id 为 my-iframe 的 iframe 元素，并定义了一个处理函数 onIframeLoad()，该函数在 iframe 加载完成后被调用。接着，根据浏览器是否支持 attachEvent 方法来分别注册 load 事件的处理函数。
检查 iframe 内容是否可用
有时候，我们需要检查 iframe 中的内容是否已经可以使用，例如需要获取 iframe 中的某个元素。这时候，我们可以通过访问 iframe 中的 contentWindow 属性来获取 iframe 的 window 对象，进而操作其中的 DOM 元素。以下是一个示例代码：
-- -------------------- ---- ------- ----- ------ - ------------------------------------- -------- -------------- - ----- ------------ - --------------------- ----- -------------- - ---------------------- ----- ------------- - ------------------------------------------------ --------------------------- - -- -------------------- - ---------------------------- -------------- - ---- - ------------- - ------------- -
上述代码与前面的示例代码类似，不同之处在于 onIframeLoad() 函数中访问了 iframe 的 contentWindow 和 document 属性，并获取了其中 id 为 target-element 的元素。注意，由于 iframe 中的内容可能需要一定时间才能加载完成，因此我们需要在 load 事件发生后再进行相关操作。
总结
通过本文，我们学习了如何检查 iframe 是否加载或其内容是否可用，并提供了相应的示例代码。在实际开发中，我们可以根据需要自行修改代码，以实现更加灵活和精细的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15128