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 数组详解
Oct 10 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 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
基于mysql的论坛(4)
2006/10/09 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
简单了解如何封装自己的Python包
2020/07/08 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
党课学习思想汇报
2014/01/02 职场文书
管理专员自荐信
2014/01/26 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
工作散漫检讨书
2014/09/16 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
外出考察学习心得体会
2016/01/18 职场文书
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL