博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
让javascript中用innerHMTL添加的脚本运行起来
阅读量:6644 次
发布时间:2019-06-25

本文共 1607 字,大约阅读时间需要 5 分钟。

  1. 把加载回来的数据以innerHTML的方式放入到一个动态生成的Div中;
  2. 创建一个文档片段,把Div中的子元素都AppendChild到片段中;
  3. 选出文档片段中的Script节点;
  4. 把文档片段中的非Script节点添加到页面;
  5. 如果此节点存在src属性,那就再一次请求此src,并取回内容;如果此节点不存在src属性, 那就把此节点的文本内容取回;
  6. 取出DOM中的Head节点,再创建一个Script节点,设置节点Type属性为Text/javascript类型;
  7. 把第5步中取出的内容,添加到第6步创建的Script节点中,并把此节点插入为Head节点的第一个子节点;
  8. 删除Head节点中在第7步插入的Script节点;

实现

Js代码
  1. /** 
  2.  * 添加innerHTML到节点中 
  3.  * @param elem 节点 
  4.  * @param html HTMLCode 
  5.  */  
  6. JS.innerHTML = function( elem , html ){   
  7.     /* 生成一个动态 */  
  8.     var dynDiv = document.createElement( 'div' );   
  9.     /* 把内容都添加到此div中 , 因为如果第一个节点为script时ie会忽略此节点,所以就要上面加一个新节点 */  
  10.     dynDiv.innerHTML = '<span >for ie</span>'+html;   
  11.     /* 取出动态div中的script节点 */  
  12.     var scripts = dynDiv.getElementsByTagName('script');   
  13.     /* 取出head节点,再新生成的节点添加到head中 */  
  14.     var head = document.getElementsByTagName('head')[0];   
  15.     /* 把script中的脚本或要引入的外部 脚本 */  
  16.     forvar i=0;i<scripts.length;i++ ){   
  17.         var jsCode = '';   
  18.         /* 如果为外部脚本,就再去加载数据 */  
  19.         if( scripts[i].src ){   
  20.             JS.ajax( {   
  21.                 url : scripts[i].src,   
  22.                 type : 'get',   
  23.                 success : function( respon ){   
  24.                     jsCode = respon.responseText;   
  25.                     evalJs( jsCode );   
  26.                 }   
  27.             } );   
  28.         /* 如果只是内部脚本,就取出程序代码 */  
  29.         }else{   
  30.             jsCode = scripts[i].innerText || scripts[i].textContent || scripts[i].text || '';   
  31.             evalJs( jsCode );   
  32.         }   
  33.     }   
  34.     function evalJs( jsCode ){   
  35.         /* 新建一个script节点 */  
  36.         var scpt = document.createElement('script');   
  37.         scpt.type='text/javascript';   
  38.         scpt.text = jsCode;   
  39.         head.insertBefore( scpt ,head.firstChild );   
  40.         head.removeChild( scpt );   
  41.     }   
  42.     /* 删除内容中的script节点 */  
  43.     forvar i=0;i<scripts.length;i++ ){   
  44.         if( scripts[0].parentNode ){   
  45.             scripts[0].parentNode.removeChild( scripts[0] );   
  46.             i--;   
  47.         }   
  48.     }   
  49.     elem.innerHTML = dynDiv.innerHTML;   
  50. }  

转载于:https://www.cnblogs.com/pinnasky/archive/2012/02/21/2361104.html

你可能感兴趣的文章
JMeter学习笔记01-安装环境
查看>>
php二次开发以及垃圾回收机制
查看>>
转载《Data Guard Broker基础》
查看>>
Redhat openstack6.0的安装
查看>>
交换机套装书获京东网双重重磅推荐
查看>>
演示:设置密码长度限制、密码加强
查看>>
Hadoop系列之三:函数式编程语言和MapReduce
查看>>
模版(Template)在框架API设计之妙用
查看>>
IP数据包经由路由转发的时候,源ip和目的IP是否改变
查看>>
Open-E DSS V7 应用系列之七 卷组和卷的管理
查看>>
Installing Oracle Database 18c Using RPM Packages
查看>>
AD恢复(3)使用AD回收站
查看>>
C++static成员函数和static成员的学习
查看>>
openvswitch在rhel61+kvm环境中的使用
查看>>
***S 2012 参数化报表 -- 利用拼接字符串来取代查询参数
查看>>
大容量导入和导出数据 -- 介绍
查看>>
用幻灯片做完整的“一站到底”抢答器
查看>>
创新创新再创新(3)
查看>>
一个简单的mysql服务检测启动脚本
查看>>
linux 下搭建BugFree
查看>>