一个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数组处理方法汇总
Jun 20 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
Js apply方法详解
Feb 16 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
js星星评分效果
2014/07/24 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
人事部经理岗位职责
2014/03/07 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
离职报告格式
2014/11/04 职场文书
给老婆道歉的话
2015/01/20 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
Win11软件图标固定到任务栏
2022/04/19 数码科技