### JS检测iframe是否加载完成的方法知识点
#### 1. iframe页面加载状态检测概念
在Web开发中，iframe元素常用于将一个HTML文档嵌入到另一个HTML文档中。在某些场景下，我们需要确定iframe内部的页面是否已经完全加载完成。这通常涉及到跨域问题，比如iframe加载了一个来自不同域的页面，我们无法直接访问其DOM来判断加载状态。因此，需要使用一些特定的方法来检测iframe是否加载完毕。
#### 2. iframe与跨域cookie写入
在某些特定应用中，如与P3P协议配合使用时，iframe可以实现跨域写入cookie的功能。P3P（Platform for Privacy Preferences Project）是一种用于Web隐私保护的技术，它允许网站以标准化的方式描述其隐私政策，从而使得浏览器能够自动做出是否接受该站点cookie的决定。在这种情况下，检测iframe页面的加载状态尤其重要。
#### 3. iframe加载检测的实现方法
本文介绍了一种使用JavaScript检测iframe加载完成的方法。核心思想是通过定时检查iframe内部DOM元素的值来判断页面是否加载完成。
通过设置一个定时器（setTimeout），在iframe内页面的某个控件（例如一个input元素）的value值在一定时间后被改变。在上述示例中，一个3秒和一个6秒后，两个不同的iframe中的input控件的value值分别被设置为"ok"。
```javascript
setTimeout("SetValue()",3000);
function SetValue(){
document.getElementById("txt").value="ok";
}
```
接着，在父页面中，使用JavaScript函数`getIframeControlValue`来获取iframe中的某个HTML控件的值。这个函数负责获取iframe内部document对象，并读取指定控件的值。
```javascript
function getIframeControlValue(iframeId,controlId){
var ofrm = document.getElementById(iframeId).document;
if(ofrm == undefined){
ofrm = document.getElementById(iframeId).contentWindow.document;
}
var ff = ofrm.getElementById(controlId).value;
return ff;
}
```
然后，`fnLoadOk`函数被用来检测所有的iframe是否加载完成。这个函数通过循环检测所有iframe内部指定控件的值是否已经是"ok"，来判断是否所有的iframe都加载完成。
```javascript
function fnLoadOk(){
var b = true;
for(var i = 1; i <= 2; i++){
if(getIframeControlValue("frame"+i,"txt") == "ok"){
b = b && true;
} else {
b = b && false;
}
}
return b;
}
```
使用`setInterval`函数设置一个定时器，每隔0.5秒检查一次iframe是否加载完成。一旦检测到所有iframe都已加载完成，就清除定时器，并通过`setValue`函数更新显示结果。
```javascript
var _check = setInterval("t()", 500);
function t(){
if(fnLoadOk()){
clearInterval(_check);
setValue("加载完成!");
} else {
setValue();
}
}
```
#### 4. 注意事项
- 上述方法虽然有效，但有一定的局限性，比如它依赖于iframe内部页面的改变。如果iframe内部页面因为某些原因（如JavaScript错误）没有按预期改变DOM，那么上述方法将无法准确判断是否加载完成。
- 使用定时器检测可能对性能有影响，尤其是在设置间隔较短或者iframe数量较多的情况下。因此，在实际应用中，应当适当调整检测频率，以平衡性能与检测的准确性。
- 跨域问题依旧存在，上述方法仅适用于同源策略下的iframe加载检测。
通过上述方法，我们可以有效地检测iframe是否加载完成，但需要注意定时检测的性能问题和可能的跨域限制。在实际开发中，这些技术细节需要被仔细考虑以确保程序的稳定性和效率。
- 1
- 2
前往页