IE(<=8)中设置元素innerHTML值时,会忽略前面的无可显示内容的节点。
来源:互联网 发布:手机游戏充值端口代理 编辑:程序博客网 时间:2024/06/16 09:15
但在IE8及之前的版本中,存在bug。
IE(<=8)中,使用innerHTML插入html元素时,会忽略第一个可显示字符的前面的无盒模型的元素(例如,link、script、style元素)。
注:可显示字符不是指实际将要显示的第一个字符,即使那个字符被样式隐藏了,只要可显示即视为可显示的字符。
这个bug常引起下面问题:
1.style中定义的样式在页面没起作用;
2.js插入的html代码中的script不存在。(如果你使用script作为html模板容器,会导致找不到这个script元素)。
bug修复方法:
在要插入的html代码前添加类似于<div style=“display:none;”>hackIE</div>形式的内容,或使用jQuery的html方法处理。
概括的有点抽象。下面进行多个对比测试以彻底理解上面的结论。
下面是测试用页面代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>set innerHTML in IE</title>
<script src="jquery-1.9.1.js"></script>
<!--下面是测试用的模板-->
< script type="text/template" id="template">
<div>
<span></span><i></i></div>
<p></p>
<div></div>
<link type="text/css" rel="stylesheet" href="1.css" />
<style>
body{background:#ff0;}
</style>
<p>通过innerHTML插入的html代码中的内容</p>
</script>
</head>
<body>
<div id="test">1111</div>
<div id="test2"></div>
</body>
</html>
在IE浏览器(浏览器模式调到IE8,标准)的控制台进行下面的测试。
实验一:
document.getElementById('test').innerHTML=document.getElementById('template').innerHTML;
执行后页面结构如下
IE(<=8)
标准浏览器效果(注意 link 和style元素也会包含进来)
实验二: 修改script中的模板,在无可显示内容的元素前面添加可显示的内容(此处为一个简单的字符q),模板修改为
<script type="text/template" id="template">
<div>
<span></span><i></i></div>
<p></p>
<div></div>
q
<link type="text/css" rel="stylesheet" href="1.css" />
<style>
body{background:#ff0;}
</style>
<p>通过innerHTML插入的html代码中的内容</p>
</script>
同样执行上面的设置innerHTML的语句
document.getElementById('test').innerHTML=document.getElementById('template').innerHTML;
测试结果如下:
IE(<=8)
这时的效果和预期一致。
类似的在处理script元素时也一样(script也是没有盒模型的元素)
测试如下:
控制台执行:
document.getElementById('test2').innerHTML=document.getElementById('template').outerHTML+'SSS';
效果:
IE(<=8)
标准浏览器(结果包含script节点)
执行
document.getElementById('test2').innerHTML='q'+document.getElementById('template').outerHTML+'SSS';
(即使没盒模型的元素前有可显示的内容)
效果:
IE(<=8)
(和标准浏览器一致,符合预期)
补充:Jquery中的相关方法 .html()
下面测试通过jQuery的html方法设置html效果:
执行
var html='<script>alert(1)</script><style>body{background:#ff0;}</style><script type="text/template">aaa<div>1111</div></script>';
$(body).html(html);
效果完全符合预期(script元素 的脚本会执行,而浏览器通过innerHTML设置时,不会解析script元素中的脚本)。
这是因为jQuery进行了兼容处理。
注:虽然jQuery中会解析插入的html代码中的js脚本,但当脚本中包含外部脚本时(script 通过src指定js文件),脚本的执行顺序是否能保持一致,还有待测试。(页面加载完后,在浏览器中通过 el.appendChild(scriptEl)形式先添加一个外部script脚本,然后立即再添加一个内部脚本script元素时,第二个脚本中往往不能访问第一个脚本文件中的定义的全局变量;如果想保存执行顺序,需通过回调处理)
综上:IE(<=8)中,使用innerHTML插入html元素时,会忽略第一个可显示字符的前面的无盒模型的元素(例如,link、script、style元素)。
- IE(<=8)中设置元素innerHTML值时,会忽略前面的无可显示内容的节点。
- atoi会忽略前面字符串的空格
- 有关innerHTML应该了解和注意的事(有些元素有innerHTML属性,但在IE中是只读的)
- IE中只读的innerHTML属性
- IE中关于innerHTML的问题
- 关于集合追加写入文件中,会重复前面的内容的解决
- IE6的BUG:window.onload里用innerHTML创建的img会忽略本地缓存
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题
- 忽略IE浏览器弹出的“允许阻止的内容”
- 将参数内容插入到每个匹配元素(元素内部)的前面
- 节点通信中被忽略的知识点
- IE中打开UTF-8编码title为中文的网页会显示空白页的问题
- IE中打开UTF-8编码的网页会显示空白页的问题
- IE中打开UTF-8编码title为中文的网页会显示空白页的问题
- IE中打开UTF-8编码title为中文的网页会显示空白页的问题
- DOM(包括获取元素节点的方法以及获取和设置元素节点的属性)
- Win7系统日志上限设置与管理
- 杭电1811 Rank of Tetris(拓扑排序+并查集缩点)
- 五个常见开机不能完成自检的原因
- Windows c++ CTime与CString转换
- iOS之GET、POST:同步请求、异步请求
- IE(<=8)中设置元素innerHTML值时,会忽略前面的无可显示内容的节点。
- 使用 Vagrant就可以轻易部署N+台机器
- Web 网页
- 基于RTX51的单片机软件设计
- ActiveMQ的使用(一)
- Android 导入项目时出现的各类错误(红色感叹号)
- Struts2之struts2文件上传详解
- hadoop的安装配置 大数据
- 今日工作总结