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的为attr添加id title等效果的实现代码
Apr 20 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python 12306抢火车票脚本
2018/02/07 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
法律系毕业生求职信
2014/05/28 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Django框架中视图的用法
2022/06/10 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技