Javascript动态执行问题浅析
下面是一段示例代码:
__cb_render : function( containerId, htmlContent )
{
var oDiv = document.getElementById( containerId );
while( oDiv.childNodes.length > 0 )
{
oDiv.removeChild( oDiv.firstChild );
}
try
{
var container = document.createElement( "div" );
container.innerHTML = htmlContent;
oDiv.appendChild( container );
}
catch ( error )
{
// ignore exception
}
}
这段代码很简单,将soap返回的html代码插入到页面的一个Div容器里。在firefox里执行,okay,一切都没问题。html代码里的Javascript也能正确得以执行。但在IE浏览器里,很抱歉,一堆问题就来了。
首先,如果返回的html代码以<script开头,哪IE浏览器会直接忽略这些Javascript片断(很奇怪吧,你可以试试。)。而且,中间的Javascript代码根本得不到正确执行,还有就是采用<script src="test.js"/>这种方式引入Javascript函数,也无法成功。
所以,对IE浏览器,我们就需要采取一些特殊的解决方案。有一种解决方案,是强行在每个script tag中添加一个属性<script defer="true"......。Defer属性是指浏览器先load完所有html代码,然后去执行相应的Javascript函数。这种解决方案,一般情况下也能得到正确的结果。但笔者并不推荐,尽量少用defer属性。
以下是另一可行的解决方案,也经过了多种主流浏览器的测试。
__cb_render : function( containerId, htmlContent )
{
var oDiv = document.getElementById( containerId );
while( oDiv.childNodes.length > 0 )
{
oDiv.removeChild( oDiv.firstChild );
}
if( BrowserUtility.isIE( ) )
{
// 在html代码开头添加一段空白代码,主要是为了解决script放在开头而被IE忽略的问题
htmlContent = '<span style="display: none"> </span>' + htmlContent;
// 去掉html代码中script tag的defer属性,防止函数被执行两次
htmlContent = htmlContent .replace(/<script(.*)defer([^\s|^>]*)([^>]*)>/gi,'<script$1$3>');
}
try
{
// 先将新的节点append到DOM中
var container = document.createElement( "div" );
container.innerHTML = htmlContent;
oDiv.appendChild( container );
}
catch ( error )
{
// ignore exception
}
var scripts = container.getElementsByTagName( "script" );
for( var i = 0; i < scripts.length; i++ )
{
if( scripts[i].src )
{
// 添加script src到head中
if( BrowserUtility.isIE( ) )
{
var scriptObj = document.createElement( "script" );
scriptObj.setAttribute( "type", "text/javascript" );
scriptObj.setAttribute( "src", scripts[i].src );
var head = document.getElementsByTagName( "head" )[0];
if( head )
head.appendChild( scriptObj );
}
}
else if ( scripts[i].innerHTML )
{
// IE支持该方法去动态执行javascript代码
if ( window.execScript )
window.execScript( scripts[i].innerHTML );
}
}
// 如果是safari或是KHTML浏览器,需要将html代码中包含的css style代码显示的append到head中。
if ( BrowserUtility.isSafari() || BrowserUtility.isKHTML() )
{
var styles = container.getElementsByTagName("style");
for ( var i = 0; i < styles.length; i++ )
{
var styleContent = styles[i].innerHTML;
if ( styleContent )
{
var element = document.createElement("style");
element.type = "text/css";
if ( element.styleSheet )
{
element.styleSheet.cssText = styleContent;
}
else
{
element.appendChild( document.createTextNode( styleContent ) );
}
var head = document.getElementsByTagName( "head" )[0];
if( head )
{
head.appendChild( element );
}
}
}
}
}
以上代码中,还有一点要注意的,就是一定先要将container节点append到DOM中,也就是一定要先落地。不然,在javascript执行顺序上会有些问题的。
好了,就到这吧。搞WEB开发,真是很烦啊!!!
转载于:https://www.cnblogs.com/zzh/archive/2008/12/02/1345884.html
Javascript动态执行问题浅析相关推荐
- Swift 使用WebKit动态执行javascript脚本
Swift 使用WebKit动态执行javascript脚本 由于苹果取消UIWebView的控件使用.在IOS12 改用WebKit,需要导入头文件.swift里面需要引入相关依赖.苹果推荐我们使用 ...
- JQuery动态执行javascript代码的方法
在JQUERY中要动态执行从服务器端返回的HTML片断,可用JQUERY中的globalEval方法. 举例如下: var scriptCode='alert("hello")'; ...
- 浅析php-fpm静态和动态执行方式的比较
这篇文章主要介绍了php-fpm静态和动态执行方式的比较,较为详细的分析了php-fpm静态和动态执行方式的原理.参数功能与相关使用技巧,需要的朋友可以参考下 本文实例讲述了php-fpm静态和动态执 ...
- JavaScript对象模型-执行模型
数据类型 基本数据类型 基本数据类型是JS语言最底层的实现. 简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型 ...
- JavaScript 动态加载脚本和样式的方法
一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 ? 1 2 3 4 ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 理解Javascript_12_执行模型浅析
大家有没有想过,一段javascript脚本从载入浏览器到显示执行都经过了哪些流程,其执行次序又是如何.本篇博文将引出'javascript执行模型'的概念,并带领大家理解javascript在执行时 ...
- JDK1.8中如何用ScriptEngine动态执行JS
JDK1.8中如何用ScriptEngine动态执行JS jdk1.6开始就提供了动态脚本语言诸如JavaScript动态的支持.这无疑是一个很好的功能,毕竟Java的语法不是适合成为动态语言.而JD ...
- html动态生成按钮事件,javascript 动态生成按钮并添加事件时为什么不响应?
javascript 动态生成按钮并添加事件时为什么事件不响应?(谢谢大家!) 1)html部分 1 2 3 4 5 6 7 8 9 10 11 12 2)script部分 //_t 为一个现在的Ta ...
最新文章
- 移动应用开发—— 如何搭建开发大型的应用架构?
- python xmxl 无法启动_问题引发由于与GI相关的python脚本中的错误,Gnome终端无法启动...
- Java中的基本数据类型转换(自动、强制、提升)
- 2018年广西计算机一级,关于2018年上半年广西壮族自治区全国计算机等级考试报名工作的通知...
- 微软遭30万人实名抗议:非人道的1914万美元,能不能别赚?
- C#4.0的十种语法糖
- Android用户界面设计:使用片段
- 高手的作用在于解决难题
- 高等数学(同济大学)
- 【突破次元壁】谁说二次元离我们遥远?Python特效火遍全网,关键技术原来是它。
- jmeter插件之Dummy Sampler
- kcl计算机通信专业,KCL伦敦国王学院计算机和电子工程介绍
- Java使用poi-tl生成word文档
- 学习DNS,这一篇文章就够了
- 微信小程序 星级评分 (带小数的评分/半星)
- liunx安装node
- Ubuntu 安装sogo 输入法
- 【谈谈知识点】AC自动机
- mysql报错The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zo
- k8s二进制安装-3,配置ca证书
热门文章
- php语法高亮编辑器,最新PHPCMS V9编辑器代码高亮显示亲测可用(提前格式化)
- html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
- MySQL 删除数据
- Java存储图书信息
- sencha app watch php,我的第一个基于SenchaTouch的WebApp
- 云服务器怎么安装声音驱动_Windows服务器怎么装虚拟声卡驱动呢
- ARMA模型的性质之方法性工具
- ResNet网络详解与keras实现
- 同步数据流语言代码生成工具的研究进展
- vfp 调用 mysql uft-8 connstring_(最全的数据库连接字符串)connectionstring