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设置FieldSet展开与收缩
May 15 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
JavaScript实现PC端四格密码输入框功能
Feb 19 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
PHPCMS的使用小结
2010/09/20 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
个人银行贷款担保书
2014/04/01 职场文书
村庄绿化方案
2014/05/07 职场文书
中职生自荐信范文
2014/06/15 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
学校教学管理制度
2015/08/06 职场文书