AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Ajax中动态执行返回到innerHTML中的js

2016-11-01 824
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

*                                                 版权声明
*
* 本文以Creative Commons的知识共享署名-非商业性使用-相同方式共享发布,请严格遵循该授权协议。
* 本文首发于博客园, 此声明为本文章中不可或缺的一部分。
* 作者网名：    浪子
* 作者EMAIL：dayichen (at)163.com
* 作者BLOG：  Http://Www.Cnblogs.Com/Walkingboy
*
********************************************************************

[CallbackPlus]Ajax中动态执行返回到innerHTML中的js

－Written by 浪子@cnblogs.com  (07-08-20)

 

摘要:

最近在为CallbackPlus增加一个类似Asp.net ajax的UpdatePanel和CA的Callback一样的容器无刷更新控件，利用innerHtml来更新最终生成html代码，但是其中的js脚本文件的更新却是相当的麻烦。对于asp.net ajax中的scriptmanager的调用方式比较不满意，所以自己想了个方法进行处理。

动态插入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);
}
后记：
做完这个功能，花去了我大半天的时间，中间过程跌宕起伏，此情此景，不禁让我想到了经典台词“秋香，真是几经波折啊！”^_^......

本文转自浪子博客园博客，原文链接：http://www.cnblogs.com/walkingboy/archive/2007/08/20/RunInnerScriptWithAjax.html，如需转载请自行联系原作者
文章标签：
容器
JavaScript
前端开发
Go
.NET
移动开发
开发框架
关键词：
JavaScript ajax
JavaScript动态
ajax js
ajax动态
ajax JavaScript
长征6号
目录
相关文章
小白学大数据
|
1月前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集：JavaScript与AJAX的结合使用
虎扑APP数据采集：JavaScript与AJAX的结合使用
小白学大数据
46 1
游客j4mujezz7vm7y
|
3月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
游客j4mujezz7vm7y
40 5
夏天49597
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石：AJAX与Fetch。AJAX，使用XMLHttpRequest，处理跨域、回调地狱和错误处理。Fetch，基于Promise，简化请求，但需注意默认无跨域头和HTTP错误处理。两者各有优劣，理解其问题与解决策略，能提升前端应用的性能和用户体验。
夏天49597
170 24
阿福的工作室
|
4月前
|
JavaScript 前端开发 网络协议
js之AJAX
js之AJAX
阿福的工作室
31 0
刘志辉~
|
4月前
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
刘志辉~
37 0
疯狂的猿
|
5月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面
疯狂的猿
34 0
疯狂的猿
|
5月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件，支持样式类型，当前页，每页显示数量，按钮数量，总条数，上一页文字，下一页文字，输入框跳转等功能。
疯狂的猿
48 1
夏天49597
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶：AJAX与Fetch API对比。AJAX用于异步数据交换，XMLHttpRequest API复杂，依赖回调。Fetch API是现代、基于Promise的解决方案，简化请求处理。示例：`fetch(&#39;url&#39;).then(r =&gt; r.json()).then(data =&gt; console.log(data)).catch(err =&gt; console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性，但需留意潜在问题。
夏天49597
111 0
朝阳39
|
5月前
|
前端开发 JavaScript API
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
js【详解】ajax （含XMLHttpRequest、 同源策略、跨域、JSONP）
朝阳39
59 0
rayner
js_exception_01_ajax_能正常执行后台方法，可是无法返回
      解决方案：去掉同步
rayner
722 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言，处理数据和业务逻辑
    48
  • 2
    虎扑APP数据采集：JavaScript与AJAX的结合使用
    46
  • 3
    Python Web开发者必看！AJAX、Fetch API实战技巧，让前后端交互如丝般顺滑！
    53
  • 4
    java-ajax技术详解！！！
    53
  • 5
    AJAX响应状态
    52
  • 6
    ajax请求详细怎么实现，和其中的响应状态
    60
  • 7
    webSocket 和 ajax 的区别
    55
  • 8
    第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）
    94
  • 9
    回顾前端页面发送ajax请求方式
    42
  • 10
    《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
    71

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Ajax入门

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)