动态加载css文件导致IE8崩溃的问题

动态加载css文件有很多种方式，但对于简单的方式来说，我们可以直接创建一个link标签并且放到head中。比如以下代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script type="text/javascript" src="jquery.js"></script>
 7     <script type="text/javascript">
 8         $(function() {
 9             $('#test').click(function() {
10                 $('<link id="skin" rel="stylesheet" type="text/css" />')
11                     .attr('href', 'resources/css/neter.css')
12                     .appendTo($('head').get(0));
13                 
14                 return false;
15             });
16         });
17     </script>
18 </head>
19 <body>
20     <input type="button" id="test" name="test" value="Load Css" />
21 </body>
22 </html>

 

以上代码看起来没问题，在Firefox下测试也不会有问题，但在XP下的IE8下测试会导致以下错误：

单击确定后会显示如下：

经过测试可以将加载css文件的语句改为如下写法：

1                 $('<link id="skin" rel="stylesheet" type="text/css" />')
2                     .appendTo($('head').get(0))
3                     .attr('href', 'resources/css/neter.css');

 

posted @ 2012-12-04 17:38  AUOONG  阅读(491)  评论(0)  编辑  收藏  举报