简单的 js/jQuery动态创建script加载js文件、js/jQuery通过变量名调用函数、Ajax接收后台返回的js函数执行调用

本文链接：https://blog.youkuaiyun.com/weixin_42350070/article/details/84898543

本文介绍如何使用js/jQuery动态创建script标签加载外部js文件，并通过变量名调用js函数。内容包括：1. 动态加载js文件；2. 通过变量名执行js函数；3. 示例代码包括test.js、test.php和test.html。旨在促进开发者之间的知识分享和学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js/jQuery动态执行js函数

主体代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单点，Js动态 加载/执行 Js文件/Js函数</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript">
		$(function () {
			$('#ButClickAjaxBackFun').click(function () {
				$.ajax({
					type:"post",
					url:"test.php",
					// dataType:"json",
					data:{},
					success:function (data) {
						/* 这种形式后台需要输出：echo "<script>test();</ script>";die;  如果函数需要传参数 后台输出则： echo "<script>test(6,'abc');</ script>";die;   为了此注释不出错 请注意 </ script> 加了空格，在后台程序输出不需要空格的；*/
						$('head').append(data);




						/* 这种形式后台需要输出：echo "test()";die;  如果函数需要传参数 后台输出则： echo "test(6,'abc')";die; */
						// $('head').append('<script type="text/javascript">'+data+'</'+'script>');



						/* 这种形式后台 加载模板或加载html文件，然后把内容追加到当前页面里，如果加载的页面有自动 调用了函数，相当于在当前页调用  比如：include_once 'test.html';die; */
						// $('body').append(data);
					},
					error:function () {
						alert("Error");
					}
				});
			});

			$('#ButClickCreate').click(function () {

				/* jQuery形式创建 script */

				var ScriptStr = '<script type="text/javascript" src="test.js"></'+'script>';
				$('head').append(ScriptStr);





				/* Js形式创建 script */

				// var ScriptCreate = document.createElement("script");
				// ScriptCreate.type = "text/javascript";
				// ScriptCreate.src = "test.js";/* 自己的Js文件路径 */
				// // $('head').append(ScriptCreate);/* jQuery 追加在页面看不到 */
				// document.getElementsByTagName('head')[0].appendChild(ScriptCreate);/* Js 追加在页面看得到 */

			});


			$('#ButClickVarFun').click(function () {
				/* 这种形式 */
				var FunStr = 'VarFun';
				/* 用window[方法名](参数)的方式调用；*/
				window[FunStr](666,'abc');


				/* 另一种形式 */
				// var FunStrVal = "VarFun(666,'abc')";
				// var ScriptStrVal = '<script type="text/javascript">'+FunStrVal+'</'+'script>';
				// $('head').append(ScriptStrVal);
			});

		});

		function test(f1,f2) {
			alert(f1);
			alert(f2);
			setTimeout(function () {
				alert('这么6！');
			},2000);
		}


		function VarFun(v1,v2) {
			alert("通过变量名调用此函数");
			alert(v1);
			alert(v2);
		}


	</script>
</head>
<body>
<input type="button" value="点击通过Ajax访问后台回调Js函数" id="ButClickAjaxBackFun">
<br><br>
<input type="button" value="点击创建/加载Js文件" id="ButClickCreate">
<br><br>
<input type="button" value="点击通过变量名调用函数" id="ButClickVarFun">
</body>
</html>

test.js 根据具体情况编写

$(function () {
	alert('这都行！');
});

test.php 根据具体情况编写

<?php

echo "<script>test(6,'abc');</script>";
//echo "test(6,'abc')";
//include_once 'test.html';
die;

test.html 根据具体情况编写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript">
		$(function () {
			MsgFun();
		});


		function MsgFun() {
			layer.msg('提示', {icon: 0,time: 3000}, function(){
				alert('OK');
			});
		}

	</script>
</head>
<body>
<div style="width: 200px;height: 100px;position: absolute;top: 50%;left: 50%;margin-left: -100px;background: #ff8e1b;">
	提示信息！
</div>
</body>
</html>

关于一些插件，例如 ：layer.js  可以去官方网站下载，下载地址：http://layer.layui.com/

欢迎大家一起分享一些知识，互相学习！