一个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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
详解js中的几种常用设计模式
Jul 16 Javascript
js实现缓动动画
Nov 25 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 文件缓存函数
2011/10/08 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php unlink()函数使用教程
2018/07/12 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript之Object类型介绍
2015/04/01 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
简单的三步vuex入门
2018/05/20 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
python找出因数与质因数的方法
2019/07/25 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
费用会计岗位职责
2014/01/01 职场文书
项目考察欢迎辞
2014/01/17 职场文书
企业申诉管理制度
2014/01/30 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
会员卡清退活动总结
2014/08/27 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB