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 相关文章推荐
node.js中的socket.io入门实例
Apr 26 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Bootstrap图片轮播效果详解
Oct 17 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JS工厂模式开发实践案例分析
Oct 17 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 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 include,include_once,require,require_once
2008/09/05 PHP
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
javascript 写类方式之十
2009/07/05 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python中图像通道分离与合并实例
2020/01/17 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python输出数学符号实例
2020/05/11 Python
Python的logging模块基本用法
2020/12/24 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
联谊活动策划书
2014/01/26 职场文书
教师师德考核自我评价
2014/09/13 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
好员工观后感
2015/06/17 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
python中%格式表达式实例用法
2021/06/18 Python