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 相关文章推荐
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 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 stream_context_create()作用和用法分析
2011/03/29 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
详解在Python和IPython中使用Docker
2015/04/28 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Python判断有效的数独算法示例
2019/02/23 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
社区工作感言
2014/02/21 职场文书
保险公司增员口号
2015/12/25 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle