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 25 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
switchery按钮的使用方法
Dec 18 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
js实现登录时记住密码的方法分析
Apr 05 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python 第一步 hello world
2009/09/25 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
详解小白之KMP算法及python实现
2019/04/04 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
三月学雷锋月活动总结
2014/04/28 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
css3 文字断裂效果
2022/04/22 HTML / CSS