判断 iframe 是否加载完毕
封面图
•
2026-01-08
•
JavaScript
269
0
0
0
在 JavaScript 中,判断一个 `<iframe>` 是否加载完毕可以通过监听 `load` 事件来实现。以下是一些常见的方法: --- ### ✅ 方法一:使用 `onload` 事件 ```html <iframe id="myIframe" src="https://example.com"></iframe> <script> const iframe = document.getElementById('myIframe'); iframe.onload = function() { console.log('iframe 加载完成'); // 在这里执行你想要的操作 }; </script> ``` --- ### ✅ 方法二:使用 `addEventListener` ```html <iframe id="myIframe" src="https://example.com"></iframe> <script> const iframe = document.getElementById('myIframe'); iframe.addEventListener('load', function() { console.log('iframe 加载完成'); // 在这里执行你想要的操作 }); </script> ``` --- ### ⚠️ 注意事项 1. **跨域问题**:如果 iframe 的源(`src`)与当前页面不在同一个域名下,那么你无法通过 JavaScript 访问 iframe 的内容(如 `contentDocument` 或 `contentWindow`),但仍然可以监听 `load` 事件。 2. **动态添加的 iframe**:如果你是通过 JavaScript 动态创建 iframe,确保在添加到 DOM 后再绑定事件。 --- ### 示例:动态创建 iframe 并监听加载 ```html <script> const iframe = document.createElement('iframe'); iframe.src = 'https://example.com'; iframe.id = 'dynamicIframe'; iframe.onload = function() { console.log('动态创建的 iframe 加载完成'); }; document.body.appendChild(iframe); </script> ``` --- 如果你需要访问 iframe 内部的内容(比如操作其中的 DOM),请确保它们是**同源**的,否则会受到浏览器的安全策略限制。 --- 是否需要我提供如何在 iframe 加载完成后获取其内容或调用其函数?
上一篇:
JavaScript 模拟 sleep, 暂停几秒后再执行
下一篇:
javascript如何暂停运行若干秒
标题录入,一次不能超过6条
留言
评论