最近开发的时候用到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数据库是许多网站和应用程序的核心,它存储着各种关键数据。为了确保数据的安全性和可靠性,定期备份和恢复数据库显得尤为重要。... 在描述中提到,该工具能够实现以下几个核心功能: ...这通常涉及`mysqldump`命令...
7. `document.body.innerHTML`: 获取或设置`<body>`标签内的HTML代码。 8. `document.body.topMargin`: 页面上边距。 9. `document.body.leftMargin`: 页面左边距。 10. `document.body.rightMargin`: 页面右边距。 ...
在现代Web开发中,更推荐使用`document.getElementById()`, `document.getElementsByClassName()`, `document.getElementsByTagName()`或`document.querySelector()`等标准方法,这些方法在所有现代浏览器中都有良好...
②获取body:document.body ③获取title:document.title 修改DOM节点的内容: 1.innerHTML可以识别标签 2.innetText 不可以识别标签 修改css样式: 1.元素.style.样式名 = '样式值' 2.多个单词时第二...
- `document.body.innerText`和`document.body.innerHTML`: 分别用于获取或设置`<body>`元素内的文本内容和HTML内容。 - `document.body.margin*`: 用于设置页面边距。 ### 4. `location`子对象 - `document....
- `document.body.innerText` 和 `document.body.innerHTML`: 分别用于设置或获取`<body>`内纯文本和HTML代码。 - `document.body.margin*`: 设置页面边距,如`topMargin`, `leftMargin`等。 - `document.body....
- `document.body.innerText`和`innerHTML`:分别用于获取或设置`<body>`元素内的纯文本和HTML代码。 - `document.body.margin*`:用于设置页面边缘的空白距离。 - `document.body.background`:设置背景图像。 ...
- `document.body.innerHTML`:获取或设置`<body>`元素的HTML内容。 11. **位置和尺寸属性** - `document.body.topMargin`、`leftMargin`、`rightMargin`、`bottomMargin`:设置或返回页面的边距。 - `document....
iObj.document.getElementsByTagName('h1')[0].innerHTML = '我想变成她一天的一部分'; ``` #### 三、Firefox下访问操作`iframe`内容 Firefox浏览器支持W3C标准,可以通过`contentDocument`来访问`iframe`内部的...
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue; ``` 2. **元素选择**: - `getElementsByTagName`方法返回带有指定标签名的所有元素的NodeList集合。 - `childNodes[0]`获取第一个子节点。 ...
var table = document.getElementsByTagName("table")[0]; var row1 = table.rows[0]; var row2 = table.rows[1]; table.rows[1].cells[1].appendChild(button); row1.cells[0].innerHTML = this.value1; row2...
var pEl = document.getElementsByTagName('p')[0]; for (var i = 0; i ; i++) { var el = pEl.cloneNode(false); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 3. **...
5. **`document.body`**:返回`<body>`元素,页面的主要内容区域。 ### Document对象的常用方法: 1. **`document.getElementById(id)`**:根据指定的ID找到文档中的第一个匹配元素。返回的是一个Element对象,如果...
2. **访问表格元素**:可以使用`document.getElementById()`,`document.getElementsByTagName()`,或者`querySelector()`和`querySelectorAll()`来获取表格元素。 ```javascript var table = document....
- 示例中的 `var img = document.getElementsByTagName("img")[0]; alert(img.getAttribute("title"));` 用于获取 `<img>` 元素的 `title` 属性值。 #### 创建与添加新元素 6. **`createElement` 和 `...
- `document.body.innerText`和`document.body.innerHTML`:分别获取或设置`<body>`元素内的文本内容和HTML代码。 - `document.body.margin*`:设置页面边缘的间距。 - `document.body.background`:设置背景图像...
var body = document.getElementsByTagName('body')[0]; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; if (typeof arg == 'string') { var el = body.appendChild(document....
var pEl = document.getElementsByTagName('p')[0]; for (var i = 0; i ; i++) { var el = pEl.cloneNode(false); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 1.1.3 使用...
- `document.body`: 返回`<body>`元素对象。 - `document.documentElement`: 返回`<html>`元素对象。 **示例代码**: ```javascript var bodyElement = document.body; var htmlElement = document.documentElement;...
- 使用`document.getElementsByTagName('*')`获取页面中所有的元素。 2. **遍历元素集合**: - 通过循环遍历获取到的所有元素,并执行相应的操作。 #### 题目五:分析HTML结构 1. **解析HTML结构**: - 分析提供...