一个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代码
May 03 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
Vue.use源码分析
Apr 22 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
echarts浮动显示单位的实现方法示例
Dec 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
德生1994机评
2021/03/02 无线电
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
js运动事件函数详解
2016/10/21 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
npm qs模块使用详解
2020/02/07 Javascript
用JS实现选项卡
2020/03/23 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Django中ORM的基本使用教程
2020/12/22 Python
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
酒吧创业计划书
2014/01/18 职场文书
民生工程实施方案
2014/03/22 职场文书
怀念母亲教学反思
2014/04/28 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
住房租房协议书
2014/08/20 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书