本文探讨在项目中使用layui富文本编辑器遇到的iframe交互问题。通过研究发现，jQuery方法在iframe加载完成后仍然显示未定义，而原生JS方法则能成功执行。分析发现，这是由于iframe加载顺序晚于DOM树完成，导致jQuery的$(function(){})执行时iframe尚未加载。解决方案是使用延时或iframe加载回调方法确保在iframe加载完成后执行相关代码。
在项目中用到了layui的富文本编辑器，此框架是通过生成iframe来实现的，由于要对富文本编辑器进行实时保存功能，需要自己在此框架基础上进行一些修改，就需要对iframe进行交互了。很少使用iframe这种方法，对此不太精通。就去查了一下操作方法，发现自己有的方法有效果有的没有，出于程序员的态度，不搞清今晚就不可能睡着了！
使用原生JS的方法都能够成功，使用JQ的方法就失败。我通过调试发现Jquery都是显示未定义，下意识的觉得就是加载顺序导致没有获取到。百度发现JQ的$(function(){})是在DOM树加载完毕后执行，window.onload是页面所有资源加载后执行。所以可能是iframe的加载靠后。
通过将JQ,JS的加载完毕方法去掉后，发现对iframe的JS方法显示null，JQ方法显示未定义，对此，出于职业本能都知道是iframe的加载靠后导致的了。靠后到比DOM树还晚。
DOM加载顺序（网上图示）：
1.解析HTML结构
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
