一个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 相关文章推荐
一个JS的日期格式化算法示例
Jul 31 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php多线程并发实现方法
2016/09/30 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
python Django模板的使用方法(图文)
2013/11/04 Python
Python logging模块用法示例
2018/08/28 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
如何通过python实现全排列
2020/02/11 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Django视图、传参和forms验证操作
2020/07/15 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
优秀团队申报材料
2014/12/26 职场文书
学校工会工作总结2015
2015/05/19 职场文书
格列佛游记读书笔记
2015/06/30 职场文书