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 left,right,mid函数
Jun 10 Javascript
range 标准化之获取
Aug 28 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
快速入门Vue
Dec 19 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
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
广播爱好者需要了解的天线知识
2021/03/01 无线电
第十三节 对象串行化 [13]
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
JS的replace方法介绍
2012/10/20 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python 类之间的参数传递方式
2019/12/20 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
导游词之徐州-云龙山
2019/09/29 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
python解决12306登录验证码的实现
2021/04/18 Python
python opencv通过4坐标剪裁图片
2021/06/05 Python