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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
JS 常用校验函数
Mar 26 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
element中el-container容器与div布局区分详解
May 13 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python安装与使用redis的方法
2016/04/19 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
cf收人广告词
2014/03/14 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS