iframe作为HTML中的一个标签，经常用于页面中引入其他页面或者资源。但是，由于iframe的异步加载特性，有时候页面会出现因为iframe未加载完成而导致的内容缺失或者错误。
因此，本文将从多个方面阐述如何判断iframe是否加载完成，以便更好的使用iframe标签。
一、判断iframe是否加载完成的方法
判断iframe是否加载完成是前端开发中一个常见的问题，常见的方法有以下几种：
1、利用onload事件
//iframe加载完后触发onload事件
iframe.onload = function(){
console.log('iframe加载完成');
}
该方法是比较传统的判断iframe是否加载完成的方式，只有在整个iframe中的页面全部加载完后才会触发onload事件。
2、利用readyState属性
window.setInterval(function(){
if(iframe.readyState == "complete"){
console.log('iframe加载完成');
}
},100);
readyState属性是iframe的内部属性，只有在iframe内部的页面都加载完成后才会变为"complete"。
3、利用contentWindow的load事件
iframe.contentWindow.addEventListener('load', function() {
console.log('iframe加载完成');
});
该方法是利用contentWindow属性，监听iframe内部的load事件，当iframe内部页面完全加载后，会触发该事件。
二、常见问题及解决方案
在使用iframe加载页面时，常见的问题有：iframe页面尺寸不匹配、iframe页面内容不显示、iframe页面无法使用父页面的JS等。针对这些问题，可以采取以下解决方案：
1、iframe页面尺寸不匹配
当iframe的页面尺寸不匹配时，我们可以通过以下方式进行解决：
iframe.onload = function(){
var iframeHeight = iframe.contentWindow.document.body.scrollHeight;
var iframeWidth = iframe.contentWindow.document.body.scrollWidth;
iframe.style.height = iframeHeight + 'px';
iframe.style.width = iframeWidth + 'px';
}
该方法是在iframe加载完成后，通过获取iframe内部页面的body高度和宽度，然后将iframe的高度和宽度设置为获取到的值，从而实现iframe页面尺寸的匹配。
2、iframe页面内容不显示
当iframe页面内容不显示时，我们可以通过以下方式进行解决：
iframe.onload = function(){
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.display = "block";
}
该方法是在iframe加载完成后，通过获取iframe文档对象，然后更改body的display属性为"block"，从而显示iframe页面内部的内容。
3、iframe页面无法使用父页面的JS
当iframe页面无法使用父页面的JS时，我们可以通过以下方式进行解决：
iframe.onload = function(){
var iframeWindow = iframe.contentWindow;
var frameFunc = iframeWindow.eval('getClassNames'); // 调用iframe中的方法
console.log(frameFunc()); // 在控制台输出结果
}
该方法是在iframe加载完成后，通过获取iframe的contentWindow属性，然后调用iframe中的JS方法，从而实现iframe页面使用父页面中的JS。
三、小结
本文从如何判断iframe是否加载完成和iframe常见问题两个方面进行了详细的阐述，并给出了对应的解决方案。在开发中，使用iframe标签时，需要注意iframe的异步加载特性，并结合实际情况选择合适的判断iframe是否加载完成的方法，从而更好地实现页面。
