一个Js文件函数中调用另一个Js文件函数的方法演示


Posted in Javascript onAugust 14, 2017

我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的。那么该如何解决呢?当然,你可以将代码通通copy过来,也许你并不喜欢这样。

例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b()。而b()中又要调用a.js文件中的方法a()。若要实现这个功能,必须注意,将要引入的Js文件代码放在</body>下面。

首先,我们在html中引入b.js,并在</body>之后加入引用语句。如下:

<html>
<body>

 <input type="button" value="ok" onclick="javascript:b()">

</body>

<!--这里引用要放在body下面-->

<script language="JAVASCRIPT" src='b.js'></script>

</html>

b.js文件如下:

new_element=document.createElement("script");
new_element.setAttribute("type","text/javascript");

new_element.setAttribute("src","a.js");// 在这里引入了a.js

document.body.appendChild(new_element);

function b() {

 a();

}

在b.js文件中前4行代码中我们引入了a.js文件,并在第7行代码中调用了a.js代码中的a()方法。

让我们来分析一下关键的几句代码:首先,我们利用document.createElement("script")生成了一个script的标签,设置其type属性为text/javascript,src为a.js(这里的a.js同b.js放在同一个目录,也可放在不同的目录)。最后将这个标签动态地加入body中。如此一来,我们就可以调用到不同js文件中的方法了。

补充(详解)

  方法一,在调用文件的顶部加入下例代码:

document.write(”<script language=javascript src='/js/2.js'><\/script>”);

  方法二:在将下边代码放入Body中:

new_element=document.createElement(”script”);
new_element.setAttribute(”type”,”text/javascript”);
new_element.setAttribute(”src”,”2.js”);
document.body.appendChild(new_element);

我们来分析一下关键的几句代码:
首先,我们利用document.createElement(”script”)生成了一个script的标签,设置其 type属性为text/javascript,src为2.js(这里的1.js同2.js放在同一个目录,也可放在不同的目录)。最后将这个标签动态 地加入body中。如此一来,我们就可以调用到不同js文件中的方法了。

注意:<script language=”JAVASCRIPT” src='1.js'></script>一定要放在body下面。

 因为在2.js中用到了body(document.body.appendChild(new_element);)

 如果将引如2.js的代码放在body上面,也就是说,

 进入页面后,还没有生成body就已经执行b.js里的document.body.appendChild(new_element);了。

 这时body不存在就会抛javascript错误。

好了以上就是小编为大家整理的一个Js文件函数中调用另一个Js文件函数的方法的内容了。希望对大家的学习有所帮助,也希望大家继续支持三水点靠木~

Javascript 相关文章推荐
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
JS制作简易计算器的实例代码
Jul 04 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 #Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
js异步编程小技巧详解
Aug 14 #Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 #Javascript
使用yeoman构建angular应用的方法
Aug 14 #Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 #Javascript
使用D3.js制作图表详解
Aug 13 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
document.compatMode介绍
2009/05/21 Javascript
javawscript 三级菜单的实现原理
2009/07/01 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python二叉树的实现实例
2013/11/21 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python添加模块搜索路径和包的导入方法
2019/01/19 Python
python如何保存文本文件
2020/06/07 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
python音频处理的示例详解
2020/12/23 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
英语国培研修感言
2014/02/13 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书