一个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中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
js简单时间比较的方法
Aug 02 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
php学习之 认清变量的作用范围
2010/01/26 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
理解AngularJs指令
2015/12/10 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python机器学习之神经网络(一)
2017/12/20 Python
详解django三种文件下载方式
2018/04/06 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python 星号(*)的多种用途
2020/09/21 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
幼儿园大班毕业感言
2014/02/06 职场文书
电气工程自动化求职信
2014/03/14 职场文书
表彰大会主持词
2014/03/26 职场文书
个人求职信范文
2014/05/24 职场文书
普通话演讲稿
2014/09/03 职场文书
开除员工通知
2015/04/22 职场文书
python中的getter与setter你了解吗
2022/03/24 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers