页面动态加载对应的js文件（页面动态加载对应的js文件）

发布时间：2023-12-08

页面动态加载对应的js文件（页面动态加载对应的js文件）

更新：2022-11-15 03:16

本文目录一览：

  1. 如何在html页面动态加载js文件
  2. 如何在js文件中动态加载另一个js文件？
  3. 用原生js怎么动态添加一个js文件
  4. 怎么在网页中通过jQuery动态加载js代码
  5. 如何动态的加载js文件
  6. 网页的动态JS在哪找？

如何在html页面动态加载js文件

html页面动态加载js文件脚本的方法。

1、直接document.write

<script language="javascript">
    document.write("<script src='test.js'></script>");
</script>

2、动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
    s1.src="test.js";
</script>

3、动态创建script元素

<script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "test.js";
    oHead.appendChild(oScript);
</script>

这三种方法都是异步的，所以在采用这类方法动态加载Js的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况。

如何在js文件中动态加载另一个js文件？

1、直接document.write

<script language="javascript">
    document.write("<script src='test.js'></script>");
</script>

2、动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
    s1.src="test.js";
</script>

3、动态创建script元素

<script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "test.js";
    oHead.appendChild(oScript);
</script>

其实原理就是利用DOM动态的引入一个js到文件中来就能和原有的js通信了

用原生js怎么动态添加一个js文件

如果需要用原生js动态的加载另外一个js文件，可以使用原生js的document.createElement方法创建script节点，然后更改该节点的type和src属性,最后通过appendChild方法将该节点动态添加到html中，这样就可以了，参考代码如下：

var new_element = document.createElement("script"); // 创建新的script节点
new_element.setAttribute("type", "text/javascript");
new_element.setAttribute("src", "../js/jquery.js");
document.body.appendChild(new_element); // 添加到body节点的末尾

上例中是在body的最末尾添加的，当然同样可以在head中添加引用该js的标签：

document.head.appendChild(new_element);

怎么在网页中通过jQuery动态加载js代码

用JQ自带的AJAX来动态加载你想要的JS文件：

$.getScript("这是你的JS名字.js", function(){
    alert("这是JS加载完了成功的回调函数");
});

这是动态加载的JS文件，AJAX必须要有环境才能运行。

如何动态的加载js文件

1、直接document.write

document.write("<script src='test.js'></script>");

2、动态改变已有script的src属性

<script src='' id="s1"></script>
<script language="javascript">
    s1.src="test.js";
</script>

3、动态创建script元素

<script>
    var oHead = document.getElementsByTagName('HEAD').item(0);
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "test.js";
    oHead.appendChild(oScript);
</script>

这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

4、原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。

注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。

主页面代码：

<script language="JavaScript">
function GetHttpRequest() {
    if (window.XMLHttpRequest) // Gecko
        return new XMLHttpRequest();
    else if (window.ActiveXObject) // IE
        return new ActiveXObject("MsXml2.XmlHttp");
}
function AjaxPage(sId, url) {
    var oXmlHttp = GetHttpRequest();
    oXmlHttp.OnReadyStateChange = function() {
        if (oXmlHttp.readyState == 4) {
            if (oXmlHttp.status == 200 || oXmlHttp.status == 304) {
                IncludeJS(sId, url, oXmlHttp.responseText);
            } else {
                alert('XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')');
            }
        }
    }
    oXmlHttp.open('GET', url, true);
    oXmlHttp.send(null);
}
function IncludeJS(sId, fileUrl, source) {
    if ((source != null) && (!document.getElementById(sId))) {
        var oHead = document.getElementsByTagName('HEAD').item(0);
        var oScript = document.createElement("script");
        oScript.language = "javascript";
        oScript.type = "text/javascript";
        oScript.id = sId;
        oScript.defer = true;
        oScript.text = source;
        oHead.appendChild(oScript);
    }
}
AjaxPage("scrA", "b.js");
alert("主页面动态加载JS脚本。");
alert("主页面动态加载a.js并取其中的变量：" + str);
</script>

网页的动态JS在哪找？

可以在开发者工具当中找。 打开开发者工具，然后选择网络（Network），在下面的列表就可以看到动态加载的js文件了。如果文件比较多，可以选js进行筛选。 如果不是js文件，是在页面当中的js，可以在开发者工具的元素（Elements）面板里面找到文档当中的js。

推荐文章