日期:2014-05-17  浏览次数:20795 次

document.getElementsByTagName("BODY")[0].innerHTML获取失败
最近开发的时候用到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中!就这样,搞定!