IE 8 HTML Parsing Error: Unable to modify the parent container element before the child element is c

最新推荐文章于 2021-04-13 14:59:09 发布
最新推荐文章于 2021-04-13 14:59:09 发布 · 187 阅读 · 0
文章标签：

#javascript #ViewUI

解释了在DOM树加载过程中进行DOM操作可能导致的错误，提供了解决方案，包括使用document.readyState状态判断和setTimeout延迟执行。

它的发生，是因为某些DOM操作发生在DOM树加载完成之前，比如appendChild

就像下面的代码：

<html>
<head>
</head>
<body>
<div>
<script type="text/javascript">
alert(document.readyState);
var oDiv = document.createElement("DIV");
oDiv.innerHTML = 'test odiv test odiv';
document.body.appendChild(oDiv);
</script>
</div>
</body>
</html>

当解析到DIV时就开始在BODY上appendChild，而这个时候BODY是还没有完全就绪的（It is not fullyloaded），文档结构仍在loading和interactive状态之间，于是，便会得到上述错误。当然，该错误目前已确切知道的会存在于IE6和IE7两个版本中（低于IE6的未进行测试），在IE8中将会得到一个HTML解析错误：HTML Parsing Error: Unable tomodify the parent container element before the child element is closed(KB927917)

1.要解决这个问题，可以进行document.readyState状态判断，当它为complete时再进行相应的操作，或者给script标签加上defer属性（该属性在IE8中已不获支持）。


2.或者


js中加入了 setTimeout("XXXX()",1000);，使其获得足够的加载时间后执行目标(XXXX)的function，于是问题得到解决



说 明

这个属性是只读的，传回值有以下的可能：

0-UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。
1-LOADING：加载程序进行中，但文件尚未开始解析。
2-LOADED：部分的文件已经加载且进行解析，但对象模型尚未生效。
3-INTERACTIVE：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。
4-COMPLETED：文件已完全加载，代表加载成功。
　
　
范 例
alert("The readyState property is " + xmlDoc.readyState);


document.readyState几种状态及示例 - gaoyusi - My code life < scriptlanguage = " javascript " >
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code life if (document.readyState == " complete " )
document.readyState几种状态及示例 - gaoyusi - My code life {
document.readyState几种状态及示例 - gaoyusi - My code lifeAdjustImageSize();
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life else
document.readyState几种状态及示例 - gaoyusi - My code life {
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.onreadystatechange=function()
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifeif(document.readyState=="complete")
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code lifeAdjustImageSize();
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code life function AdjustImageSize()
document.readyState几种状态及示例 - gaoyusi - My code life {
document.readyState几种状态及示例 - gaoyusi - My code lifevarimageWidth=document.all["SendPic"].width;
document.readyState几种状态及示例 - gaoyusi - My code lifevarimageHeight=document.all["SendPic"].height;
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifeif(imageWidth==0&&imageHeight==0)
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.write("图片下载失败，请刷新！");
document.readyState几种状态及示例 - gaoyusi - My code lifereturn;
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifeif(imageWidth>160||imageHeight>160)
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code lifeif(imageWidth>imageHeight)
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code lifek=160/imageWidth;
document.readyState几种状态及示例 - gaoyusi - My code lifeimageHeight=imageHeight*k;
document.readyState几种状态及示例 - gaoyusi - My code lifeimageWidth=160;
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code lifeelse
document.readyState几种状态及示例 - gaoyusi - My code life{
document.readyState几种状态及示例 - gaoyusi - My code lifek=160/imageHeight;
document.readyState几种状态及示例 - gaoyusi - My code lifeimageWidth=imageWidth*k;
document.readyState几种状态及示例 - gaoyusi - My code lifeimageHeight=160;
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.all["ImgResized"].value="1";
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.all["SendPic"].width=imageWidth;
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.all["SendPic"].height=imageHeight;
document.readyState几种状态及示例 - gaoyusi - My code life
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.all["ImgWidth"].value=imageWidth;
document.readyState几种状态及示例 - gaoyusi - My code lifedocument.all["ImgHeight"].value=imageHeight;
document.readyState几种状态及示例 - gaoyusi - My code life}
document.readyState几种状态及示例 - gaoyusi - My code life </ script >


function showMessage() {
if (document.readyState == "complete")
{
art.dialog.alert('Yeah~~,This is BackGround Dialog!');
}
}


iteye_19606
关注
Parsing error: The keyword ‘interface‘ is reserved配置优化
xiangzhihong8的专栏
08-06 912
这里面提到的standard也是一个代码风格检查工具，官网是：https://standardjs.com 看它的内容描述，这是一个类似eslint的东西，似乎比eslint更加简单。关键的内容就是其中的parserOptions.parser配置使用typescript语法插件的parser就可以正确识别项目中.vue文件的ts代码，根据eslint-plugin-vue官方的说明，我这里额外配置了一个vue-eslint-parser，因为我的项目需要配置下这个。然后在vue的函数中去使用它。
Spring Boot项目页面报错 OTS parsing error: Failed to convert WOFF 2.0
诺浅的专栏
04-23 1437
缘起 项目中编辑器的图标出现问题，显示不出来了。究其原因是因为：这些图标其实是字体图标，在springboot项目中，静态文件是存在于resources文件夹中的，使用分环境打包，开启filtering功能后，会破坏有二进制内容的文件。 解决方案 将静态文件排除在过滤之外 <resources> <resource> <directory&gt...
IE 8 HTML Parsing Error:Unable to modify the parent container element before the child element is...
Quber
01-10 323
一、 又长见识了 IE8报下面错误，而且是我的机器不报，同事的机器报，试了4台，两个报，两个不报，IE版本都一样，没想明白 解决： 1、查看是否有未关闭的html标签，比如<table>而没有</table> (我就是这个原因) 2、是否在页面未加载完前js代码操作了body里的元素，将相关js代码移到</body>后面 网页错误详细信息 用户代理: ...
HTML Parsing Error:Unable to modify the parent container element before the child element is closed
jumtre的专栏
05-26 1187
一、 又涨见识了 IE8报下面错误，而且是我的机器不报，同事的机器报，试了4台，两个报，两个不报，IE版本都一样，没想明白 解决： 1、查看是否有未关闭的html标签，比如而没有 (我就是这个原因) 2、是否在页面未加载完前js代码操作了body里的元素，将相关js代码移到后面 网页错误详细信息 用 户代理: Mozilla/4.0 (compatible; MSIE
BUG笔记：Win XP IE8下HTML Parsing Error: Unable to modify the parent container element before the child
前端乱谈
03-01 1838
［Bug描述］Windows XP IE8的某些版本下页面只显示一部分，其余为空白。IE左下角有惊叹号报错标志，点开后显示字符如下： HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code
Message: HTML Parsing Error: Unable to modify the parent container element before the child element ...
weixin_34198797的博客
10-29 136
      js 执行顺序错误，在低版本的 ie 浏览器中。
IE8"HTML Parsing Error:Unable to modify the parent container element before the child element is clo...
weixin_34007879的博客
11-29 152
一、IE8报下面错误，解决办法：网页错误详细信息消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)行: 0字符: 0代码: 01、查看是否有未关闭的html标签，比如<table>而没有</table&...
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
123
04-13 3677
SpringBoot项目启动后，访问页面发现字体图标不显示，打开控制台看到如下报错 Failed to decode downloaded font: URL OTS parsing error: incorrect file size in WOFF header Failed to decode downloaded font: URL OTS parsing error: incorrect entrySelector for table directory OTS parsing erro
IE8 下的Js错误HTML Parsing Error…
01-21
网页错误详细信息 用户代理: Mozilla/4.0 (compatible...消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)行: 0字符: 0代码: 0 今天调试一段J
解决Spring Boot OTS parsing error: Failed to convert WOFF 2.0
热门推荐
u013737646的专栏
03-23 2万+
在项目中为了方便配置，通常会使用properties文件保存配置信息，项目启动时，需要maven开启filtering用properties中的属性值替换掉配置文件中的占位符，比如我的项目中使用c3p0.properties文件保存数据库的连接信息，这样我每次需要修改数据库的连接信息时，只需要修改c3p0.properties中的文件即可，在mybatis-config.xml中使用${}读取值（
HTML Parsing Error: Unable to modify the parent container element before the child element is closed
pansanday的专栏
10-12 1800
在IE8浏览器下调试JS时, 碰到了这个错误, 最终发现原因是缺少div的结束标签. 转载的这篇文章虽没能解决我的问题, 但我觉得写得挺好, 转载在此, 以便日后碰到类似问题作为参考. 原本地址: http://www.cnblogs.com/grenet/archive/2012/04/24/2467571.html 感谢原作者. ==========================以下为
HTML Parsing Error: Unable to modify the parent container element before the chi
06-07 229
0729)时间戳: Fri, 8 Nov 2013 06:49:18 UTC消息: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)行: 0字符: 0代码: 0URI: http://crm.jiwu.com/jwcus!followcus.action?crmrnd=165      解决办法： http://www.micr
Unable to modify the parent container element before the child element is closed
weixin_34272308的博客
11-25 123
用IE 8打开页面时，有时会出现这样的提示： Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) 引起该问题的代码：         &lt;ul id="header_userinfo"&gt;...
HTML Parsing Error: Unable to modify the parent container element before the child element is closed...
weixin_30268921的博客
10-13 142
IE8报错误： 用户代理:Mozilla/4.0(compatible;MSIE8.0;WindowsNT5.1;Trident/4.0;.NETCLR2.0.50727;.NETCLR3.0.04506.648;.NETCLR3.5.21022;.NET4.0C;.NETCLR3.0.4506.2152;.NETCLR3.5.30729;.N...
IE8 中"HTML Parsing Error:Unable to modify the parent container element before the child element is c
懒人改变世界
01-16 1425
一、 又涨见识了 IE8报下面错误，而且是我的机器不报，同事的机器报，试了4台，两个报，两个不报，IE版本都一样，没想明白 解决： 1、查看是否有未关闭的html标签，比如而没有 (我就是这个原因) 2、是否在页面未加载完前js代码操作了body里的元素，将相关js代码移到后面 网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0;
IE 中"HTML Parsing Error:Unable to modify the parent container element before the
跑龙套@程序
07-13 372
  错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"     现象： 同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。        ...
headerAnim.js报错ERROR: Parsing error: The keyword 'const'is reserved
最新发布
09-27
<think>我们遇到的问题是：在headerAnim.js文件中，出现了'Parsing error: The keyword 'const' is reserved'错误。根据引用[1]和引用[2]，这个错误是因为ESLint默认使用ES5语法检查，而ES6语法（如const）不被识别。因此，我们需要在ESLint配置文件中指定使用ES6或更高的版本。 解决方案： 1. 在项目根目录下找到（或创建）`.eslintrc.js`文件。 2. 在该文件中配置`parserOptions`，指定`ecmaVersion`为6（或更高版本，如2015、2016等）以及`sourceType`为`"module"`。 具体步骤如下： 步骤1：打开或创建项目根目录下的`.eslintrc.js`文件。 步骤2：在配置对象中添加`parserOptions`属性，如下所示： ```javascript module.exports = { // ... 其他配置 parserOptions: { ecmaVersion: 6, // 或使用数字6，也可以使用年份如2015 sourceType: "module" } }; ``` 步骤3：保存文件，然后重新运行ESLint检查（或者如果是在开发环境中，保存后编辑器会自动应用新的配置）。 注意：有时候，你可能已经配置了`parserOptions`，但是`ecmaVersion`设置过低，比如5。那么将其改为6或更高即可。 另外，引用[2]中还提到了配置`parser`为`'babel-eslint'`，这是因为如果你使用了Babel转换器，可能需要使用babel-eslint作为解析器。如果你在项目中使用了Babel，那么可以这样配置： ```javascript module.exports = { parser: 'babel-eslint', // 先安装babel-eslint：npm install babel-eslint --save-dev parserOptions: { ecmaVersion: 6, sourceType: "module" }, // ... 其他配置 }; ``` 总结：我们遇到这个错误是因为ESLint的解析器版本设置过低，无法识别ES6的关键字（如const、let）。通过调整ESLint配置文件中的`parserOptions.ecmaVersion`即可解决。 如果问题仍然存在，请检查你的ESLint版本是否支持ES6，以及配置文件是否正确加载。 下面是一个完整的`.eslintrc.js`配置示例（不包含其他规则）： ```javascript module.exports = { env: { browser: true, node: true, }, parserOptions: { ecmaVersion: 6, // 或者2015 sourceType: "module", }, // 其他规则和插件配置 }; ``` 请根据你的项目实际情况调整。 注意：如果项目中没有安装ESLint，需要先安装： ``` npm install eslint --save-dev ``` 然后，如果你使用了babel-eslint，还需要安装： ``` npm install babel-eslint --save-dev ``` 最后，确保你的代码中没有其他语法错误。 这样修改后，headerAnim.js文件中的const关键字应该就不会再报错了。 如果问题还未解决，请检查编辑器中的ESLint插件是否使用了正确的配置文件路径。 相关问题： 1. 如何解决ESLint中出现的其他关键字错误（如import）？ 2. 如何在Vue项目中配置ESLint以支持ES6？ 3. 如何在WebStorm中配置ESLint使用自定义的配置文件？ 4. 如何升级ESLint以支持最新的ECMAScript版本？ 5. 在项目中同时使用ESLint和Prettier时需要注意什么？ </think>### 解决 `headerAnim.js` 报错：`Parsing error: The keyword 'const' is reserved` 这个错误是因为 ESLint 配置不支持 ES6 语法（如 `const` 声明），以下是详细解决步骤： #### 步骤 1：修改 ESLint 配置文件 (`.eslintrc.js`) 在项目根目录创建/修改 `.eslintrc.js` 文件，添加 `parserOptions` 配置： ```javascript module.exports = { // 新增的关键配置 parserOptions: { ecmaVersion: 6, // 启用 ES6 语法支持 sourceType: "module", // 允许使用模块化语法 ecmaFeatures: { jsx: true // 若项目含 JSX 需要开启 } }, // 其他既有配置... env: { browser: true, // 启用浏览器全局变量 node: true // 启用 Node.js 全局变量 }, rules: { // 自定义规则... } } ``` #### 步骤 2：安装 Babel 解析器（可选） 如果仍报错，可能需要更高级的解析器： ```bash npm install @babel/eslint-parser --save-dev ``` 然后在配置中添加： ```javascript module.exports = { parser: "@babel/eslint-parser", // 替换默认解析器 parserOptions: { requireConfigFile: false, // 不使用独立 Babel 配置 ecmaVersion: 2021, // 支持最新 ECMAScript sourceType: "module" } // ...其他配置 } ``` #### 步骤 3：验证解决方案 检查 `headerAnim.js` 文件头部是否包含严格模式： ```javascript // 确保文件顶部没有严格模式声明（可能冲突） // "use strict"; // 删除此行 ``` #### 配置说明表 | 配置项 | 值 | 作用 | |--------|----|------| | `ecmaVersion` | 6+ | 指定支持的 JS 版本 | | `sourceType` | `"module"` | 允许使用 `import/export` | | `env.browser` | `true` | 启用 `window` 等浏览器变量 | | `parser` | `@babel/eslint-parser` | 支持实验性 JS 语法 | > **原理说明**：ESLint 默认使用 ES5 解析器，而 `const` 是 ES6 关键字。通过 `ecmaVersion:6` 显式声明环境支持 ES6+ 语法即可解决[^1][^2]。 #### 调试技巧 1. 在 `headerAnim.js` 顶部添加临时注释： ```javascript /* eslint-disable */ // 临时禁用 ESLint 检查 ``` 2. 运行检查命令： ```bash npx eslint headerAnim.js --fix ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值