Javascript - 运行innerHTML中的script
2008-12-01 17:10
134 查看
/* innerhtml.js
* Copyright Ma Bingyao <andot@ujn.edu.cn>
* Version: 1.9
* LastModified: 2006-06-04
* This library is free. You can redistribute it and/or modify it.
* http://www.coolcode.cn/?p=117
*/
var global_html_pool = [];
var global_script_pool = [];
var global_script_src_pool = [];
var global_lock_pool = [];
var innerhtml_lock = null;
var document_buffer = "";
function set_innerHTML(obj_id, html, time) {
if (innerhtml_lock == null) {
innerhtml_lock = obj_id;
}
else if (typeof(time) == "undefined") {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
return;
}
else if (innerhtml_lock != obj_id) {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
return;
}
function get_script_id() {
return "script_" + (new Date()).getTime().toString(36)
+ Math.floor(Math.random() * 100000000).toString(36);
}
document_buffer = "";
document.write = function (str) {
document_buffer += str;
}
document.writeln = function (str) {
document_buffer += str + "\n";
}
global_html_pool = [];
var scripts = [];
html = html.split(/<\/script>/i);
for (var i = 0; i < html.length; i++) {
global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, "");
scripts[i] = {text: '', src: '' };
scripts[i].text = html[i].substr(global_html_pool[i].length);
scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i);
if (scripts[i].src) {
if (scripts[i].src[2]) {
scripts[i].src = scripts[i].src[2];
}
else if (scripts[i].src[3]) {
scripts[i].src = scripts[i].src[3];
}
else if (scripts[i].src[4]) {
scripts[i].src = scripts[i].src[4];
}
else {
scripts[i].src = "";
}
scripts[i].text = "";
}
else {
scripts[i].src = "";
scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");
}
}
var s;
if (typeof(time) == "undefined") {
s = 0;
}
else {
s = time;
}
var script, add_script, remove_script;
for (var i = 0; i < scripts.length; i++) {
var add_html = "document_buffer += global_html_pool[" + i + "];\n";
add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
script = document.createElement("script");
if (scripts[i].src) {
script.src = scripts[i].src;
if (typeof(global_script_src_pool[script.src]) == "undefined") {
global_script_src_pool[script.src] = true;
s += 2000;
}
else {
s += 10;
}
}
else {
script.text = scripts[i].text;
s += 10;
}
script.defer = true;
script.type = "text/javascript";
script.id = get_script_id();
global_script_pool[script.id] = script;
add_script = add_html;
add_script += "document.getElementsByTagName('head').item(0)";
add_script += ".appendChild(global_script_pool['" + script.id + "']);\n";
window.setTimeout(add_script, s);
remove_script = "document.getElementsByTagName('head').item(0)";
remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n";
remove_script += "delete global_script_pool['" + script.id + "'];\n";
window.setTimeout(remove_script, s + 10000);
}
var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n";
end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n";
end_script += "}\n";
end_script += "else {\n";
end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
end_script += "innerhtml_lock = null;\n";
end_script += "}";
window.setTimeout(end_script, s);
}
作者修正
2006-6-4 更新:
修正了插入到 innerHTML 中的脚本无法获取插入到 innerHTML 中对象的问题。(感谢网友 DE 的提醒)。
增加了对同一容器中内容设置的共享锁,使得连续设置同一个容器内的时,不会再发生冲突。(感谢新加坡网友 Jason Li 的提醒)。
2006-5-29 更新:
增加了使用外部脚本缓存功能,提高了第二次加载相同外部脚本的速度。
2006-5-23 更新:
在热心的使用者 johnZEN 的提醒下,增加了共享锁,使得同时设置多个容器内的内容时,不会再发生冲突。
在网友 udbjatwfn 的提醒下,修正了 IE 中存在的内部脚本执行作用域错误的问题。
作者代码原贴地址:http://www.coolcode.cn/?p=117&cp=all#pp0
今天在写AJAX的时候,碰到了obj.innerHTML = response.text时,如果返回的代码中,有<script>内容,则无法执行,网上看了些解决办法,基本思路应该是将innerHTML中的所有内容取出,然后分析,将其中的<script>内容取出,执行
作者 andot 的分析内容比较全面,需要注意的有几个问题
1.跨浏览器的兼容性的问题,在IE浏览器的情况下,只要在innerHTML里的script里加上defer属性即可,语法如下<script defer></script>,不过在其他浏览器下无效
2.如果IE的<script>在innerHTML开头,会忽略掉,其他浏览器正常,解决办法是判断浏览器是否为IE,如果是IE则加上一些空的HTML标签
其余解决中细节问题,在作者原文中有描述
* Copyright Ma Bingyao <andot@ujn.edu.cn>
* Version: 1.9
* LastModified: 2006-06-04
* This library is free. You can redistribute it and/or modify it.
* http://www.coolcode.cn/?p=117
*/
var global_html_pool = [];
var global_script_pool = [];
var global_script_src_pool = [];
var global_lock_pool = [];
var innerhtml_lock = null;
var document_buffer = "";
function set_innerHTML(obj_id, html, time) {
if (innerhtml_lock == null) {
innerhtml_lock = obj_id;
}
else if (typeof(time) == "undefined") {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10);
return;
}
else if (innerhtml_lock != obj_id) {
global_lock_pool[obj_id + "_html"] = html;
window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10);
return;
}
function get_script_id() {
return "script_" + (new Date()).getTime().toString(36)
+ Math.floor(Math.random() * 100000000).toString(36);
}
document_buffer = "";
document.write = function (str) {
document_buffer += str;
}
document.writeln = function (str) {
document_buffer += str + "\n";
}
global_html_pool = [];
var scripts = [];
html = html.split(/<\/script>/i);
for (var i = 0; i < html.length; i++) {
global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, "");
scripts[i] = {text: '', src: '' };
scripts[i].text = html[i].substr(global_html_pool[i].length);
scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1);
scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i);
if (scripts[i].src) {
if (scripts[i].src[2]) {
scripts[i].src = scripts[i].src[2];
}
else if (scripts[i].src[3]) {
scripts[i].src = scripts[i].src[3];
}
else if (scripts[i].src[4]) {
scripts[i].src = scripts[i].src[4];
}
else {
scripts[i].src = "";
}
scripts[i].text = "";
}
else {
scripts[i].src = "";
scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1);
scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, "");
}
}
var s;
if (typeof(time) == "undefined") {
s = 0;
}
else {
s = time;
}
var script, add_script, remove_script;
for (var i = 0; i < scripts.length; i++) {
var add_html = "document_buffer += global_html_pool[" + i + "];\n";
add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
script = document.createElement("script");
if (scripts[i].src) {
script.src = scripts[i].src;
if (typeof(global_script_src_pool[script.src]) == "undefined") {
global_script_src_pool[script.src] = true;
s += 2000;
}
else {
s += 10;
}
}
else {
script.text = scripts[i].text;
s += 10;
}
script.defer = true;
script.type = "text/javascript";
script.id = get_script_id();
global_script_pool[script.id] = script;
add_script = add_html;
add_script += "document.getElementsByTagName('head').item(0)";
add_script += ".appendChild(global_script_pool['" + script.id + "']);\n";
window.setTimeout(add_script, s);
remove_script = "document.getElementsByTagName('head').item(0)";
remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n";
remove_script += "delete global_script_pool['" + script.id + "'];\n";
window.setTimeout(remove_script, s + 10000);
}
var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n";
end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n";
end_script += "}\n";
end_script += "else {\n";
end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n";
end_script += "innerhtml_lock = null;\n";
end_script += "}";
window.setTimeout(end_script, s);
}
作者修正
2006-6-4 更新:
修正了插入到 innerHTML 中的脚本无法获取插入到 innerHTML 中对象的问题。(感谢网友 DE 的提醒)。
增加了对同一容器中内容设置的共享锁,使得连续设置同一个容器内的时,不会再发生冲突。(感谢新加坡网友 Jason Li 的提醒)。
2006-5-29 更新:
增加了使用外部脚本缓存功能,提高了第二次加载相同外部脚本的速度。
2006-5-23 更新:
在热心的使用者 johnZEN 的提醒下,增加了共享锁,使得同时设置多个容器内的内容时,不会再发生冲突。
在网友 udbjatwfn 的提醒下,修正了 IE 中存在的内部脚本执行作用域错误的问题。
作者代码原贴地址:http://www.coolcode.cn/?p=117&cp=all#pp0
今天在写AJAX的时候,碰到了obj.innerHTML = response.text时,如果返回的代码中,有<script>内容,则无法执行,网上看了些解决办法,基本思路应该是将innerHTML中的所有内容取出,然后分析,将其中的<script>内容取出,执行
作者 andot 的分析内容比较全面,需要注意的有几个问题
1.跨浏览器的兼容性的问题,在IE浏览器的情况下,只要在innerHTML里的script里加上defer属性即可,语法如下<script defer></script>,不过在其他浏览器下无效
2.如果IE的<script>在innerHTML开头,会忽略掉,其他浏览器正常,解决办法是判断浏览器是否为IE,如果是IE则加上一些空的HTML标签
其余解决中细节问题,在作者原文中有描述
相关文章推荐
- BX9029: IE 和 Firefox 可以通过特定方法使 innerHTML 方法载入的 SCRIPT 标签中的 JavaScript 代码在页面加载后也可以执行
- JavaScript设置innerHTML时出现“未知的运行时错误”--我也遇上了
- 解决ajax返回innerHTML中javascript不能运行的问题
- 实现innerHTML中javascript的运行,从而使的页面各个模块间更好的交互,和数据共享.
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- 解决ajax返回innerHTML中javascript不能运行问题
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- 解决ajax返回innerHTML中javascript不能运行问题
- 在innerHTML的中有script标签该如何运行
- Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
- 运行插入到innerHTML中的script
- Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- ajax中如何实现innerHTML中javascript的运行
- Javascript在IE下设置innerHTML时出现"未知的运行时错误"
- javascript 中innerHTML函数导致“ 未知的运行时错误”
- ajax中如何实现innerHTML中javascript的运行
- 让Ajax返回的innerHTML中的Javascript代码运行起来
- JavaScript在IE下设置innerHTML时出现"未知的运行时错误"
- JavaScript设置innerHTML时出现“未知的运行时错误”--我也遇上了