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 获取LI里的内容
Dec 17 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 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
什么是MVC,好东西啊
2007/05/03 PHP
PHP中读写文件实现代码
2011/10/20 PHP
PHP实现下载功能的代码
2012/09/29 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
使用js获取伪元素的content实例
2017/10/24 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
浅析python redis的连接及相关操作
2019/11/07 Python
使用python绘制二维图形示例
2019/11/22 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
安全标准化实施方案
2014/02/20 职场文书
英语系毕业生求职信
2014/07/13 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
小爸爸观后感
2015/06/15 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python