php动态生成script,javascript同步和异步动态创建script元素实例详解

动态创建script元素(异步)

在同一个文件夹下面创建一个function3.html，代码如下：

function init()

{

var myScript= document.createElement("script");

myScript.type = "text/javascript";

myScript.src="package.js";

document.body.appendChild(myScript);

//如果马上使用会找不到，因为还没有加载进来

functionOne();

}

function operation()

{

//可以运行，显示“成功加载”

functionOne();

}

此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载，存在同样的问题。

这三种方法都是异步执行的，所以在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行，然后你发现functionOne就可以运行了，或者你的后期代码需要在另一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面肯定不可能使用这些方法。

其实第三种方法改一点就变成同步加载了。

动态创建script元素(同步)

在同一个文件夹下面创建一个function4.html，代码如下：

function init()

{

var myScript= document.createElement("script");

myScript.type = "text/javascript";

myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));

document.body.appendChild(myScript);

//此处发现可以运行

functionOne();

}

此方法并没有加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码可以正常运行。但是在IE8以及以下的版本中会导致错误。IE将

myScript.type = "text/javascript";

myScript.text = "function functionOne(){alert(\"成功运行\"); }";

document.body.appendChild(myScript);

//此处可以运行

functionOne();

经过这样修改之后的代码可以在IE、Firefox、Opera和Safari3及之后版本中运行。Safari3.0之前的版本虽然不能正确地支持text属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari，可以使用下面代码：var myScript= document.createElement("script");

myScript.type = "text/javascript";

var code = "function functionOne(){alert(\"成功运行\"); }";

try{

myScript.appendChild(document.createTextNode(code));

}

catch (ex){

myScript.text = code;

}

document.body.appendChild(myScript);

//此处发现可以运行

functionOne();

这里，首先尝试标准的DOM文本节点方法，因为除了IE8以及以下，所有浏览器都支持这种方式。如果这行代码抛出了错误，那么说明是IE8以及以下，于是就必须使用text属性了。整个过程可以用以下函数来表示：function loadScriptString(code)

{

var myScript= document.createElement("script");

myScript.type = "text/javascript";

try{

myScript.appendChild(document.createTextNode(code));

}

catch (ex){

myScript.text = code;

}

document.body.appendChild(myScript);

}

然后你可以在其他地方使用此方法来加载需要使用的代码。实际上，这样执行代码与在全局作用于中把相同字符串传递给eval()是一样的。

以上就是javascript同步和异步动态创建script元素实例详解的详细内容，更多请关注php中文网其它相关文章！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！