JS动态插入脚本和插入引用外部链接脚本的方法

在日常开发中，经常遇到 js 动态插入脚本 。

什么是 js 动态插入脚本 ?

指的是在页面加载时不存在，但将来的某一时刻通过修改该 DOM 动态添加的脚本。和操作 HTML 元素一样。

js 动态插入脚本也有两种方式：插入 JavaScript 代码和插入外部文件。

一、直接插入 javascript 代码

<script type="text/javascript">
function sayHi() {
 alert("hi");
}
</script>

从逻辑上讲，下面的 DOM 代码是有效的：

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi() {alert('hi');}"));
document.body.appendChild(script);

在 Firefox、Safari、Chrome 和 Opera 中，这些 DOM 代码可以正常运行。但在 IE 中，则会导致错误。IE 将 <script> 视为一个特殊的元素，不允许 DOM 访问其子节点。不过，可以使用

<script> 元素的 text 属性来指定 JavaScript 代码，想下面的例子这样：

var script = document.creatElement("script");
script.type = "text/javascript";
script.text = "function sayHi() {alert('hi');}";
document.body.appendChild(script);

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

var script = document.createElement("script");
script.type = "type/javascript";
var code = "function sayHi() {alert('hi');}";
try {
 script.appendChild(document.createTextNode(code));
} catch (ex) {
 script.text = code;
}
document.body.appendChild(script)

这里首先尝试标准的 DOM 文本节点方法，因为除了 IE（在 IE 中会导致抛出错误），所有的浏览器都支持之中方式。如果这行代码抛出了错误，那么说明是 IE，于是就必须使用 text 属性了，整个过程可以用以下函数来表示：

function loadScriptString(code) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 try {
 script.appendChild(document.createTextNode(code));
 } catch (ex) {
 script.text = code;
 }
 document.body.appendChild(script);
}
loadScriptString("function sayHi() {alert('hi');}");;

二、插入引用外部文件

动态加载外的外部 JavaScript 文件能够立即运行，比如下面的 <script> 元素。

<script type="text/javascript" src="client.js"></script>

而创建这个节点的 DOM 代码如下所示：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);

显然这里的 DOM 如实的反映了相应的 HTML 代码。不过执行最后一行代码把 <script> 元素添加到页面之前，是不会下载外部文件的。也可以把这个元素添加到 <head> 元素中效果相同。

但是怎么知道这个脚本文件加载完成了呢，因为我们有些函数需要在脚本加载完成生效后才能开始执行。

经过对网络上资源的搜索，我发现在 IE 浏览器中可以使用 <script> 元素的 onreadystatechange 来监控加载状态的改变，并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。

所以一个简单的实现过程看上去是下面这样的：

IE 下：

var script = document.createElement("script");
var url = 'http:';
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
 if(this.readyState == "loaded" || this.readyState == "complete"){
 alert("加载成功啦！");
 }
}
script.setAttribute("src", url);

Opera、FF、Chrome 等：

var script = document.createElement("script");
var url = 'http';
script.setAttribute("type","text/javascript");
script.onload = function() {
 alert("加载成功啦！");
}
script.setAttribute("src",url);

最后可以合并一个 js 动态插入脚本 的 function ;

function loadScript(url, callback) {
 callback = typeof callback === 'function' ? callback : function() {};
 var head = document.getElementsByTagName('head')[0];
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.onreadystatechange = function() {
 if(this.readyState == "loaded" || this.readyState == "complete"){
  callback();
 }
 }
 script.onload = callback;
 head.appendChild(script);
}

总结

以上所述是小编给大家介绍的JS动态插入脚本和插入引用外部链接脚本的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js动态在form上插入enctype=multipart/form-data的问题

    我们都知道要让form能提交文件,需要在form上指定enctype=multipart/form-data的attribute,这样才能上传文件,关于enctype的文章很多,就不再做解释. 问题是因为使用了MVC的Html.BeginForm()来输出表单代码,默认是没有加入enctype的, 复制代码 代码如下: @using (Html.BeginForm()) { } 在PartialView中有一个<input type="file" />用来上传文件,又不想为

  • 深入理解javascript动态插入技术

    深入理解javascript动态插入技术

    最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上.这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势.首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果: 复制代码 代码如下: <!doctype html><html dir="ltr" lang="zh-CN">    <head>     

  • JavaScript插入动态样式实现代码

    与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式:动态样式是在页面加载完成后动态添加到页面中. 我们以下面这个典型的<link>元素为例: <link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素: 复制代码 代码如下: var link = document.createElement("link&qu

  • JSP中使用JavaScript动态插入删除输入框实现代码

    JavaScript代码: 复制代码 代码如下: <script language="javascript"> function addrows(){ var len = optionlist.rows.length; //得到table的行数 var obj = optionlist.insertRow(len);//在最后一行插入 /**插入第一列**/ obj.insertCell(0); obj.cells(0).innerHTML="选项" +

  • JS把内容动态插入到DIV的实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-

  • 得到文本框选中的文字，动态插入文字的js代码

    复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  } function InsertTag(tagbegin,tagend)  {   if ((document.selection)&&

  • JavaScript动态插入script的基本思路及实现函数

    在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是: 1.动态创建一个script标签,设置其src属性,type属性等 2.将script节点插入页面,加载js文件 即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现: 复制代码 代码如下: // 动态插入script标签 fu

  • 如何让动态插入的javascript脚本代码跑起来。

    首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式: 假设我们要装入的代码是a.js: var foo=function(){ document.write("I am a.js content foo() function by never-online"); }; 一.直接插入src,这种方法简单而直接,但有局限性, 1) <script> var x=document.createElement("SCRIPT"); x.src=

  • JS动态插入脚本和插入引用外部链接脚本的方法

    在日常开发中,经常遇到 js 动态插入脚本 . 什么是 js 动态插入脚本 ? 指的是在页面加载时不存在,但将来的某一时刻通过修改该 DOM 动态添加的脚本.和操作 HTML 元素一样. js 动态插入脚本也有两种方式:插入 JavaScript 代码和插入外部文件. 一.直接插入 javascript 代码 <script type="text/javascript"> function sayHi() { alert("hi"); } </sc

  • js 动态给元素添加、移除事件的实现方法

    最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件 /addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作 //作用域:事件处理程序会在其所属元素的作用域内运行 //addEventListener(event,function,capture/bubble);removeEventListener(event,functio

  • js 动态生成json对象、时时更新json对象的方法

    函数不需要 return,因为 json 对象会被函数直接修改. var str1 = {"name": "apple", "sex": "21"}; // 参数:prop = 属性,val = 值 function createJson(prop, val) { // 如果 val 被忽略 if(typeof val === "undefined") { // 删除属性 delete str1[prop]

  • PHP实现对站点内容外部链接的过滤方法

    熟悉SEO的朋友都知道,对于网站外部链接失效的情况如果链接带有rel="nofollow"属性可以避免不必要的损失.本文就以实例形式演示了PHP实现对站点内容外部链接的过滤方法.具体如下: 问题描述:原来站内很多文章都是摘录的外部文章,文章里很多链接要么是时间久了失效了,要么就是一些测试的网址,如:http://localhost/ 之类的,链接多了的话,就形成站内很多死链接,这对SEO优化是很不利的. 解决方法:需要对站点内的内容进行过滤,将不是内部链接的链接加上 rel="

  • 利用JS动态生成隔行换色HTML表格的两种方法

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> <html> <head> <title>动态表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"

  • 说说在Spring中如何引用外部属性文件的方法

    说说在Spring中如何引用外部属性文件的方法

    进行数据源或者 FTP 服务器等资源配置时,我们可以将这些配置信息放到一个独立的外部属性文件中,并在 Spring 配置文件中通过形如 ${user}.${password} 的占位符方式来引用属性文件中的属性项 . 这种方式的配置有两个好处: 减少了维护的工作量 - 资源的配置信息可以被多个应用共享,如果资源的配置信息发生了变更,那么我们只需要调整这个独立的配置文件就可以啦. 部署更加简单 - 通过一个独立的属性文件来存放这些配置信息,则部属人员只需要调整这个属性文件即可,无须关注结构复杂.信

  • maven项目引用外部jar包的方法

    问题描述: 有一个java maven web项目,需要引入一个第三方包gdal.jar,但是这个包是自己打包的,在maven中央库里面找不到该包,因此我采用传统的方式,将这个包拷贝到:项目名称\src\main\webapp\WEB-INF\lib的目录下,然后通过config build path将该gdal.jar包引入到项目工程中.对于传统java web项目,这么做当然没有问题,但是对于maven项目,项目打包(mvn install)时就会报错,在项目调试时(debug on ser

  • 微信小程序跳转到其他网页(外部链接)的实现方法

    个人类型和海外类型的小程序不支持 web-view 标签  也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开) 3.wxml 1. index.wxml   (按钮页面) <view class='wrapper'> <button class='wepay' bindtap='goBaidu'>点击跳转</button> </vie

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

随机推荐