动态插入Script：
首先碰到的问题是，生成回来的html（包含html标记和script脚本）插入到对应的容器的innerHtml中，却发现script不见了。结果发现是返回来的脚本是这样子的<script>...</script>，如果有动态使用document.write输出脚本到页面的人，可能明白这样子写是会出出错的，一定要把</script>拆开写才可以（"</SCRIPT" + ">"），修改过后（代码如下），html的插入正常了。
<HTML>
<SCRIPT>
function insertScript(){
var sHTML="<input type=button onclick=" + "run()" + " value='Click Me'><BR>";
var sScript="<SCRIPT>";
sScript = sScript + "function run(){ alert('Hello from inserted script.') }";
sScript = sScript + "</SCRIPT" + ">";
divHtml.innerHTML = sHTML + sScript;
}
</SCRIPT>
<BODY onload="insertScript();">
<DIV ID="divHtml"></DIV>
</BODY>
</HTML>
但是这样子就存在一个问题了，我需要去替换整个html中的</script>,麻烦。因为容器中的控件都是我们自己开发的，其中关键脚本的输出和html的输出是可以分开写的，所以想到是否分成两部分进行一个更新，一个容器放真正的html，一个容器专门放script，修改代码如下：
<HTML>
<SCRIPT>
function insertScript(){
var sHTML="<input type=button onclick=" + "run()" + " value='Click Me'><BR>";
var sScript="<SCRIPT>";
sScript = sScript + "function run(){ alert('Hello from inserted script.') }";
sScript = sScript + "</SCRIPT"+">";
divHtml.innerHTML = sHTML;
divScript.innerHTML = sScript;
}
</SCRIPT>
<BODY onload="insertScript();">
<DIV ID="divHtml"></DIV>
<DIV ID="divScript"></DIV>
</BODY>
</HTML>
结果问题又出来，你会发现你的script又丢了，没有真正插入到divScript容器中。
经过测试，原来如果插入script到innerHTML的话，单单插入script代码是不行的，一定要在script之前带上html，好比上例中的input，而且不能放在script后面，即一定要是这样子的格式：
<html>+<script>,而不能是<script>或者<script>+<html>.
动态执行Script：
经过上面的修改，现在的html和script都已经正确更新到dom中了，但是script中定义的方法却没有执行。
要执行字符串中的脚本，我第一步想到的是使用eval。
但是目前html和script是混合一起输出的，所以需要分离出要执行的script代码，然后使用eval。
首先写了个分离脚本的函数:
function AnalyzeHtml(html,start,end){
var regexp=new RegExp(start+"((.|\r\n)*?)"+end,"g");
var strings=html.match(regexp);
var objs=new Array();
var regexp2=new RegExp("(^"+start+"|"+end+"$)","g");
var js;
if(strings!=null){
for(var i=0;i<strings.length;i++){
objs[i] = strings[i].replace(regexp2,'');
}
var strScript = objs.join(";").replace(/\\\"/g,"\"").replace(/\\\'/g,"'");
//eval(strScript);
js += strScript+";"
}
html = null;
regexp=null;
strings=null;
objs = null;
regexp2 = null;
eval(js);
return js;
}
在Callback返回的函数中调用：
html = html.replace(/<script type=\'text\/javascript\'>/g,"<script>").replace(/<script type=\"text\/javascript\">/g,"<script>");//把不同的script标签替换为一样的
AnalyzeHtml(html,"<script>","</s"+"cript>") ;
本来以为事情告一段落，结果新的问题又出来了。
通过eval执行的脚本倒是运行了，但是其中定义类的脚本却丢失了，比如：
//丢失
var a = "变量";
//丢失
function run(){
//TODO:
}
//正常运行
alert("执行函数");
其中定义类的脚本（比如变量，比如匿名函数）都无法加到当前的window域内，立即执行的脚本则正确运行了。看来无法通过eval来执行script的动态输出了。
搜索网络上的一些文章之后，得到一个新的方法，是利用ie本身的机制来执行的。即当节点被移除的时候，ie会重新解析节点内部的html，有脚本则会执行相关的脚本，不过这里面的脚本必须设置defer属性才可以。新方法如下：
/*
* 描述：跨浏览器的设置 innerHTML 方法
* 允许插入的 HTML 代码中包含 script 和 style
* 作者：kenxu <ken@ajaxwing.com>
* 日期：2006-03-23
* 参数：
* el: 合法的 DOM 树中的节点
* htmlCode: 合法的 HTML 代码
* 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
*/
var setInnerHTML = function (el, htmlCode) {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
htmlCode = htmlCode.replace(/<script([^>]*)>/gi,
'<script$1 defer>');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
} else {
var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next) {
el_parent.insertBefore(el, el_next)
} else {
el_parent.appendChild(el);
}
}
}
此方法充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。还有另外一个方法如下：
/* 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);
}
分享到：
相关推荐
在JavaScript编程中，动态插入脚本是一种常见的技术，用于在页面加载后或者根据某些条件按需加载外部的JavaScript文件。这种技术在处理大型应用、优化页面性能或实现异步加载时非常有用。本文将详细介绍如何让动态...
在`Noname1.html`这个文件中，很可能展示了一个使用JavaScript动态插入HTML元素的实际例子。你可以打开这个文件查看其具体实现，以加深理解。同时，记住在编写这类代码时，确保考虑到性能和兼容性问题，因为频繁操作...
javascript动态插入行列 javascript动态插入行列
在深入理解JavaScript动态插入技术的探讨中，我们首先关注到的是动态插入技术的核心概念，即如何使用JavaScript将HTML内容动态地添加到网页中。这类技术允许开发者在不重新加载页面的情况下，修改页面的结构和内容。...
动态创建iframe意味着在网页加载后，通过JavaScript代码创建并插入到DOM（文档对象模型）中，而不是在HTML源代码中静态定义。 以下是一个简单的动态创建iframe的例子： ```javascript // 创建iframe元素 var ...
### JS 实现动态插入输入框以及删除、位置调换 #### 概述 在Web开发中，经常需要根据用户操作动态地添加或移除表单元素。本文将深入探讨如何利用JavaScript来实现动态插入文本输入框及对其进行删除与位置调整的...
JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言，主要用于实现网页的交互功能。在...
在Java编程中，动态插入和删除节点主要涉及前端开发，特别是使用JavaScript库如jQuery时的情况。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画制作和Ajax交互。在这个场景下，"动态插入和删除节点...
在日常的前端开发中，偶尔有需要动态插入javascript代码的需求，基本思路是： 1、动态创建一个script标签，设置其src属性，type属性等 2、将script节点插入页面，加载js文件 即相当于将[removed][removed]添加到了...
本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言，它允许我们对网页进行实时更新和交互，而不需刷新整个页面。 首先，我们需要一个基本的HTML...
javaScript实现动态增删插入表格
动态加载外部JS文件是网页开发中的一个重要技术，它允许网页在需要时按需加载JavaScript资源，从而提高页面的加载速度，优化用户体验，并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...
js 动态插入脚本也有两种方式：插入 JavaScript 代码和插入外部文件。 一、直接插入 javascript 代码 [removed] function sayHi() { alert("hi"); } [removed] 从逻辑上讲，下面的 DOM 代码是有效的： ...
动态加载JavaScript文件的基本原理是利用`<script>`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面我们将深入探讨这两种方法： 1. **使用`<script>`标签**： 在HTML中，...
Node.js结合sqlite3模块实现Sqlite数据库建表并实现大数据量的快速插入
在JavaScript中动态插入HTML表格是一种常见的...总的来说，JavaScript动态插入HTML表格是一个基础但强大的技术，它可以让你的网页具有更强的动态性和交互性。通过理解这个过程，你可以更好地控制和展示网页上的数据。
### 动态插入、添加删除表格行的JS代码 在网页开发中，表格是一个非常重要的元素，用于展示数据。为了使网页更具交互性，我们常常需要动态地对表格进行操作，比如插入或删除行等。本文将通过一个具体的示例来讲解...
总结来说，"动态显示当前时间的js"是一种利用JavaScript Date对象和定时器功能实现网页上实时更新当前时间的技术。通过理解和应用这些知识，开发者可以创建各种动态时间显示功能，适应不同项目的需求。
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
本话题将重点讨论如何利用JavaScript实现决策树的动态插入功能，以及与之相关的`dtree`库。 首先，`dtree`库是用于创建交互式决策树图表的JavaScript工具，适用于Web应用程序。它允许开发者以HTML和CSS样式定义决策...