最近开发的时候用到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中!就这样,搞定!
分享到:
相关推荐
MySQL数据库备份/恢复工具V1.0.0 我找了一些代码改进的.单个文件实现服务器备份,下载到本机,分卷备份等.
javascript函数的解释,解释了具体函数的功能,一、函数JavaScript函数集合 1.document.write("");... document.getElementById("div_1").innerHTML="页面将在0秒后自动跳转"+"<a href=\"http://www.baidu.com\">点击...
var a = document.getElementById("all").getElementsByTagName("li"); var zz =new Array(a.length) for(var i=0;i <a.length;i++) { zz[i]=a[i].innerHTML } //div的字符串数组付给zz var pageno=1; //当前页 ...
较大的收件箱撰写窗口因为微小的东西很烂,没有其他方法可以...document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=
// ad function dy(code) ...document.writeln ('<iframe width="120" height="24" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" border="0" src=...
alltds = document.getElementsByTagName("td"); var snake = new Array(); function drawBgColor(){ for(i=0;i<alltds.length;i++){ alltds[i].style.backgroundColor = bgColor; } } function ...
e)}}),a(function(){var b=document.body,c=b.appendChild(c=document.createElement("div"));c.offsetHeight,a.extend(c.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0}),a.support.minHeight=c...
一般来说透明的属性值是"transparent",但在chrome里却是"rgba(0, 0, 0, 0)",所以用了一个属性来保存透明值: this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent"; 并在GetBgColor获取背景色...
然后,我从dom中获得了所有元素让spans = document.body.getElementsByTagName('span') 一旦有了所有的范围,我就遍历了它们,并为每个具有隐藏属性的元素提取了innerHTML。 让messageString =“” for(let i = ...
charset=gb2312" /> <title>test</title><br></head><br><body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"> <table height=1000> <tr><td>dddd</td></tr> </table> </body>...
var Y=window,T={innerHTML:""},N="document",H="documentElement",C="getElementsByTagName",V,A,S,G,c,X=navigator.appName;if(X=="Microsoft Internet Explorer")S=true;else if(X=="Opera")c=true;else G=true;A...
margin:0 auto}body{font:12px arial;text-align:;background:#fff}body,p,form,ul,li{margin:0;padding:0;list-style:none}body,form,#fm{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:...