最近开发的时候用到html在线编辑器!发现一个问题,保存内容的时候一切正常!当再次取出内容进行编辑的时候,无法加载我的内容!这个情况,在刚开始开发的时候未出现,能够正常编辑,当做完这个项目进行上线测试,才显露问题!
进过分析,发现js函数中的body.innerHTML有问题,无法识别该属性!内容是用onload事件进行函数调用的!难道该属性不能这样写,网上查阅也没有发现这样写有错!慢慢细想,通过alert("size:"+f.document.getElementsByTagName("BODY").length);
打印body数组数量,发现onload事件加载时,body数组长度为0,也就是说,页面加载时body未完全加载到当前页面中!呵呵,终于发现问题原因了!
要说一下,我这里所说的body是当前页面通过js输出的一个IFRAME框架内的html的主体!
也就是说,onload事件时当前页面的body加载完毕,而IFRAME框架内的html的body主体未加载完!所以取不到IFRAME框架内的html的body!
var f = window.frames["HtmlEditor"];//框架ID var body = f.document.getElementsByTagName("BODY")[0]; //要获取的框加内的body
当前主体页面加载IFRAME框加嵌入/html/blankpage.html页面
<SCRIPT language=JavaScript> <!-- if(document.all){ document.write('<table width="100%" height:287px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:286px;width:100%" frameBorder="0" marginHeight=0 marginWidth=0 src="/html/blankpage.html"></IFRAME></td></tr></table>'); }else{ document.write('<table width="100%" height:288px border="0" cellspacing="0" cellpadding="0" ><tr><td style="border:1px solid #C5C5C5; border-top:0;background-color:#ffffff"><IFRAME class="HtmlEditor" ID="HtmlEditor" name="HtmlEditor" style=" height:283px;width:100%;margin-left:1px;margin-bottom:1px;" frameBorder="0" marginHeight=0 marginWidth=0 src="/html/blankpage.html"></IFRAME></td></tr></table>'); } //--> </SCRIPT>
在onload事件中获取HtmlEditor框架中的body
var f = window.frames["HtmlEditor"]; var body = f.document.getElementsByTagName("BODY")[0]; //alert("size:"+f.document.getElementsByTagName("BODY").length); body.innerHTML=document.getElementById("overviewText").value;
明白原因就好处理了,我在onload事件中,设置定时器setTimeout("loadContent();",1500)为1.5秒中之后,再调用另一个函数loadContent();
function loadContent(){ var f = window.frames["HtmlEditor"]; var body = f.document.getElementsByTagName("BODY")[0]; //alert("size:"+f.document.getElementsByTagName("BODY").length); body.innerHTML=document.getElementById("overviewText").value; }
也就是当前主页面加载完之后,我在等待1.5秒,让HtmlEditor框架中的body加载完毕在调用函数,重新将内容放到body中!就这样,搞定!