本文介绍如何在JavaScript中实现同步导入并调用外部JS文件。通过自定义Import.js模块,利用XMLHttpRequest或动态脚本标签处理跨浏览器兼容性问题(如IE的readyState与标准浏览器的onload)。文章提供了完整的核心代码、远程测试脚本示例以及具体的HTML调用方式,帮助开发者解决同步加载外部资源的需求。
在线演示地址
在线演示地址:https://www.jb51.net/jslib/Import/a.html
核心功能代码import.js
核心功能代码文件为import.js。
具体实现代码如下:
<!--
(function(){
if(typeof window._Import != "undefined") return; //防止多次加载
function _Import(uri, x) {
var f = arguments.callee.caller;
if(typeof f == "function") {
var IsIE = (navigator.userAgent.indexOf("MSIE") == -1)? false : true;
var scriptEle = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
scriptEle.type = "text/javascript";
scriptEle.src = uri;
if (x)
{
if (IsIE) {
scriptEle.onreadystatechange = x;
}
else {
scriptEle.onload = x;
}
}
}
}
window._Import = _Import;
})();
//--> 远程测试a.js
远程测试a.js
代码如下:
var a = "本站www.jb51.net==="; 具体调用代码
具体调用代码
代码如下:
<html>
<head>
<title>-</title>
</head>
<body>
<script type="text/javascript" src="Import.js"></script>
<script type="text/javascript">
(function(){
function callback()
{
var IsIE = (navigator.userAgent.indexOf("MSIE") == -1)? false : true;
if (IsIE)
{
if(/loaded/.test(this.readyState))
{
alert(a);
}
}
else
{
alert(a);
}
}
_Import("https://www.jb51.net/jslib/Import/a.js", callback)
})()
</script>
</body></html>