十三郎的IT生活

 

js innerHTML 问题

相信很多Ajax初学者都会遇到：用innerhtml插入的JS脚本无法执行，用Google搜了很久，找了两个不错的解决方案...

方案1:来自济南大学马秉尧老师的innerhtml.js

JavaScript代码
  1. /* innerhtml.js 
  2.  * Copyright Ma Bingyao <andot@ujn.edu.cn> 
  3.  * Version: 1.9 
  4.  * LastModified: 2006-06-04 
  5.  * This library is free.  You can redistribute it and/or modify it. 
  6.  * http://www.coolcode.cn/?p=117 
  7.  */  
  8.   
  9. var global_html_pool = [];  
  10. var global_script_pool = [];  
  11. var global_script_src_pool = [];  
  12. var global_lock_pool = [];  
  13. var innerhtml_lock = null;  
  14. var document_buffer = "";  
  15.   
  16. function set_innerHTML(obj_id, html, time) {  
  17.     if (innerhtml_lock == null) {  
  18.         innerhtml_lock = obj_id;  
  19.     }  
  20.     else if (typeof(time) == "undefined") {  
  21.         global_lock_pool[obj_id + "_html"] = html;  
  22.         window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);  
  23.         return;  
  24.     }  
  25.     else if (innerhtml_lock != obj_id) {  
  26.         global_lock_pool[obj_id + "_html"] = html;  
  27.         window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);  
  28.         return;  
  29.     }  
  30.   
  31.     function get_script_id() {  
  32.         return "script_" + (new Date()).getTime().toString(36)  
  33.           + Math.floor(Math.random() * 100000000).toString(36);  
  34.     }  
  35.   
  36.     document_buffer = "";  
  37.   
  38.     document.write = function (str) {  
  39.         document_buffer += str;  
  40.     }  
  41.     document.writeln = function (str) {  
  42.         document_buffer += str + "\n";  
  43.     }  
  44.   
  45.     global_html_pool = [];  
  46.   
  47.     var scripts = [];  
  48.     html = html.split(/<\/script>/i);  
  49.     for (var i = 0; i < html.length; i++) {  
  50.         global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, "");  
  51.         scripts[i] = {text: '', src: '' };  
  52.         scripts[i].text = html[i].substr(global_html_pool[i].length);  
  53.         scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);  
  54.         scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i); 
  55.         if (scripts[i].src) { 
  56.             if (scripts[i].src[2]) { 
  57.                 scripts[i].src = scripts[i].src[2]; 
  58.             } 
  59.             else if (scripts[i].src[3]) { 
  60.                 scripts[i].src = scripts[i].src[3]; 
  61.             } 
  62.             else if (scripts[i].src[4]) { 
  63.                 scripts[i].src = scripts[i].src[4]; 
  64.             } 
  65.             else { 
  66.                 scripts[i].src = ""; 
  67.             } 
  68.             scripts[i].text = ""; 
  69.         } 
  70.         else { 
  71.             scripts[i].src = ""; 
  72.             scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1); 
  73.             scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");  
  74.         }  
  75.     }  
  76.   
  77.     var s;  
  78.     if (typeof(time) == "undefined") { 
  79.         s = 0; 
  80.     } 
  81.     else { 
  82.         s = time; 
  83.     } 
  84.  
  85.     var script, add_script, remove_script; 
  86.  
  87.     for (var i = 0; i < scripts.length; i++) { 
  88.         var add_html = "document_buffer += global_html_pool[" + i + "];\n"; 
  89.         add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n"; 
  90.         script = document.createElement("script"); 
  91.         if (scripts[i].src) { 
  92.             script.src = scripts[i].src; 
  93.             if (typeof(global_script_src_pool[script.src]) == "undefined") { 
  94.                 global_script_src_pool[script.src] = true; 
  95.                 s += 2000; 
  96.             } 
  97.             else { 
  98.                 s += 10; 
  99.             } 
  100.         } 
  101.         else { 
  102.             script.text = scripts[i].text; 
  103.             s += 10; 
  104.         } 
  105.         script.defer = true; 
  106.         script.type =  "text/javascript"; 
  107.         script.id = get_script_id(); 
  108.         global_script_pool[script.id] = script; 
  109.         add_script = add_html; 
  110.         add_script += "document.getElementsByTagName('head').item(0)";  
  111.         add_script += ".appendChild(global_script_pool['" + script.id + "']);\n"; 
  112.         window.setTimeout(add_script, s); 
  113.         remove_script = "document.getElementsByTagName('head').item(0)"; 
  114.         remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n"; 
  115.         remove_script += "delete global_script_pool['" + script.id + "'];\n"; 
  116.         window.setTimeout(remove_script, s + 10000); 
  117.     } 
  118.  
  119.     var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n"; 
  120.     end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n"; 
  121.     end_script += "}\n"; 
  122.     end_script += "else {\n"; 
  123.     end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n"; 
  124.     end_script += "innerhtml_lock = null;\n"; 
  125.     end_script += "}";  
  126.     window.setTimeout(end_script, s);  
  127. }  

在线DEMO:http://test.coolcode.cn/innerhtml/
JS调用方法:

JavaScript代码
  1. set_innerHTML('要插入innerhtml的ID名称', '要插入的代码');  

方案2:来自www.ajaxwing.com的innerHTML简单版

JavaScript代码
  1. /* 
  2.  * 描述：跨浏览器的设置 innerHTML 方法 
  3.  *       允许插入的 HTML 代码中包含 script 和 style 
  4.  * 作者：kenxu <ken@ajaxwing.com> 
  5.  * 日期：2006-03-23 
  6.  * 参数： 
  7.  *    el: 合法的 DOM 树中的节点 
  8.  *    htmlCode: 合法的 HTML 代码 
  9.  * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+ 
  10.  */  
  11. var setInnerHTML = function (el, htmlCode) {  
  12.     var ua = navigator.userAgent.toLowerCase();  
  13.     if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {  
  14.         htmlCode = '<div style="display:none">for IE</div>' + htmlCode;  
  15.         htmlCode = htmlCode.replace(/<script([^>]*)>/gi,  
  16.                                     '<script$1 defer>');  
  17.         el.innerHTML = htmlCode;  
  18.         el.removeChild(el.firstChild);  
  19.     } else {  
  20.         var el_next = el.nextSibling;  
  21.         var el_parent = el.parentNode;  
  22.         el_parent.removeChild(el);  
  23.         el.innerHTML = htmlCode;  
  24.         if (el_next) {  
  25.             el_parent.insertBefore(el, el_next)  
  26.         } else {  
  27.             el_parent.appendChild(el);  
  28.         }  
  29.     }  
  30. } 

调用方法:

JavaScript代码
  1. setInnerHTML('DOM 树中的节点', '要插入的代码');    

简单版充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。

posted on 2007-12-11 14:51 十三郎 阅读(2927) 评论(2)  编辑 收藏 引用 所属分类: JS

评论

# re: js innerHTML 问题 2011-10-10 09:57 乱七

什么那么乱？共享就做得好一点。不过谢谢。  回复  更多评论   

只有注册用户登录后才能发表评论。

导航

常用链接

留言簿(5)

随笔分类

文章分类

积分与排名