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 遍历json返回的map内容示例代码
Oct 29 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
jQuery链使用指南
Jan 20 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
Java无向树分析 实现最小高度树
Apr 09 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制作静态网站的模板框架
2006/10/09 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js+css在交互上的应用
2010/07/18 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python cookie反爬处理的实现
2020/11/01 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
二审答辩状范文
2015/05/22 职场文书