JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)


Posted in Javascript onNovember 01, 2016

在项目开发过程中,也许你会遇这样的情况。

在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能。

我们知道,在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文件中的方法了。

以上就是小编为大家带来的JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
浅谈document.write()输出样式
May 07 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 #Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 #Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 #Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 #Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 #Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 #Javascript
You might like
php中设置多级目录session的问题
2011/08/08 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
js数组操作学习总结
2013/11/04 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python排序算法实例代码
2017/08/10 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
Python下载的11种姿势(小结)
2020/11/18 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
2014年大学生自我评价
2014/01/19 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
劳模事迹材料范文
2014/12/24 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android