新发现：让IE 678都Crash的代码

木已 · 发表于 2011-8-25 09:48

新发现的一段会让IE6 IE7 IE8都崩溃退出的代码

这段代码来自jQuery中的，在我使用jQuery的一个方法时，使得IE Crash掉了，后来慢慢找出来了
Javascript代码
//jQuery代码
$("<link rel='stylesheet' type='text/css' />").attr('href','XXX');

//jQuery代码
$("<link rel='stylesheet' type='text/css' />").attr('href','XXX');

我提取出有问题的代码，如下：
Javascript代码
var div=document.createElement('div'),
head=document.getElementsByTagName('head')[0];

div.innerHTML="div<div><link rel='stylesheet' type='text/css' /></div>";

div.lastChild.childNodes[0].setAttribute('href','xxx');

var div=document.createElement('div'),
head=document.getElementsByTagName('head')[0];

div.innerHTML="div<div><link rel='stylesheet' type='text/css' /></div>";

div.lastChild.childNodes[0].setAttribute('href','xxx');

我找了几台机器，几个版本的IE678试过了，这算是IE的BUG吧，IE9则不会崩溃

http://www.jamcode.org/

楠楠 · 发表于 2011-8-25 09:48

悲剧啊，应该是加了href，该元素就会被移动到head里，结果从一个悬空的元素中移除就挂了。这里可能有什么莫名的bug...

爱车车 · 发表于 2011-8-25 09:48

从现象来看似乎是这样，link元素按w3的要求，必须放在<head>中：

引用

Permitted parent elements
Any element that can contain metadata elements, noscript

但是jquery显然没聪明到分析$构建时的字符串来确定这个元素能不能在div里，于是当一个link元素不在head中，且不在DOM树中，又加href属性的时候，就挂掉了

PS：私以为，jquery根本就是傻，或者说他根本没看HTML标准，导致他的$构建使用div的innerHTML，构建很多元素（base/link/style/title/meta等）时都在违反HTML标准……其实HTML里有一个神奇的元素，可以放在任何地方，可以容纳任何元素，那就是noscript

曾经的小孩 · 发表于 2011-8-25 09:48

int08h 写道
从现象来看似乎是这样，link元素按w3的要求，必须放在<head>中：

引用

Permitted parent elements
Any element that can contain metadata elements, noscript

但是jquery显然没聪明到分析$构建时的字符串来确定这个元素能不能在div里，于是当一个link元素不在head中，且不在DOM树中，又加href属性的时候，就挂掉了

PS：私以为，jquery根本就是傻，或者说他根本没看HTML标准，导致他的$构建使用div的innerHTML，构建很多元素（base/link/style/title/meta等）时都在违反HTML标准……其实HTML里有一个神奇的元素，可以放在任何地方，可以容纳任何元素，那就是noscript

但是noscript元素在IE下不能设置和读取innerHTML

ksdal · 发表于 2011-8-25 09:48

szcjlssx 写道
int08h 写道
从现象来看似乎是这样，link元素按w3的要求，必须放在<head>中：

引用

Permitted parent elements
Any element that can contain metadata elements, noscript

但是jquery显然没聪明到分析$构建时的字符串来确定这个元素能不能在div里，于是当一个link元素不在head中，且不在DOM树中，又加href属性的时候，就挂掉了

PS：私以为，jquery根本就是傻，或者说他根本没看HTML标准，导致他的$构建使用div的innerHTML，构建很多元素（base/link/style/title/meta等）时都在违反HTML标准……其实HTML里有一个神奇的元素，可以放在任何地方，可以容纳任何元素，那就是noscript

但是noscript元素在IE下不能设置和读取innerHTML

好像确实有这问题我给忘了……noscript是透明元素，所以我也没搞明白没连接DOM的时候，他的内容模型算啥……惭愧惭愧

feiguo · 发表于 2011-8-25 09:48

jquery在这方面是做的不够的。可参考innershiv这个项目。

ksdal · 发表于 2011-8-25 09:49

hax 写道
jquery在这方面是做的不够的。可参考innershiv这个项目。

使用document.createElement('link')是不会出问题的,只有innerHTML产生的link元素(并且设置了rel="stylesheet")才会有此问题.
innerShiv解决了HTML5元素的识别.
要解决这个BUG,可以在$('<link />')时判断如果是不能出现在body中的元素,则使用createElement,其它的使用div.innerHTML,这样就避免了这个问题

多想把这段代码插入到中国的每一个网站上

芷馨 · 发表于 2011-8-25 09:49

szcjlssx 写道
hax 写道
jquery在这方面是做的不够的。可参考innershiv这个项目。

使用document.createElement('link')是不会出问题的,只有innerHTML产生的link元素(并且设置了rel="stylesheet")才会有此问题.
innerShiv解决了HTML5元素的识别.
要解决这个BUG,可以在$('<link />')时判断如果是不能出现在body中的元素,则使用createElement,其它的使用div.innerHTML,这样就避免了这个问题

多想把这段代码插入到中国的每一个网站上

我觉得这不现实，像这样的代码
$('<p>haha</p><div>this is a <a href="###">link</a></div><b>bold<link href="xxx" rel="stylesheet" />')，只通过字符串分析的话，jquery得有html解析引擎了

江南枫 · 发表于 2011-8-25 09:49

学习了~~~~

fl · 发表于 2011-8-25 09:49

int08h 写道

我觉得这不现实，像这样的代码
$('<p>haha</p><div>this is a <a href="###">link</a></div><b>bold<link href="xxx" rel="stylesheet" />')，只通过字符串分析的话，jquery得有html解析引擎了

没有什么不现实的，参考innerShiv。

并不需要完整的解析，只需要针对常见的坑做字符串替换即可。

帐号		自动登录	找回密码
密码			成为会员