javascript - 如何将多个(2)JavaScript文件插入HTML页面

我有一个HTML页面，并且我想插入这2个文件。

<script type="text/javascript" src="Request.js"  ></script>

"use strict";
var $ = function(id) { return document.getElementById(id); };

var saveReservation = function() {

    var name = document.getElementById("name").value;
    sessionStorage.setItem("name", name);
	var email = document.getElementById("email").value;
    sessionStorage.setItem("email", email);



    // submit form
    $("reservation_form").submit();
};

window.onload = function() {
    $("submit_request").onclick = saveReservation;
    $("arrival_date").focus();
};

<script type="text/javascript" src="regex.js" ></script>

"use strict";
var $ = function(id) { return document.getElementById(id); };

var validatePhone = function() {
    var phone = $("phone").value;
    var pattern = /^\d{3}-\d{3}-\d{4}$/;                        // 999-999-9999


    var pattern = /^(1[-\.\s])?(\()?\d{3}(\))?[-\.\s]\d{3}[-\.]\d{4}$/;


    var isValid = pattern.test(phone);

    $("message").firstChild.nodeValue = (isValid) ? "Valid phone number" : "Invalid phone number";
};

window.onload = function() {
    $("validate").onclick = validatePhone;
};

当单击一个按钮时，其中一个会带您进入会话存储，而另一个则在单击该按钮时会验证电话号码。

但是，当我在上面使用该脚本时，它只运行其中一个。

最佳答案

每个设置window.onload=，因此当一个运行时，它将替换另一个的onload处理程序。如果您不想依赖jQuery之类的东西，您可以做的一件事就是这样，首先检查是否已经设置了onload处理程序，如果是，则添加新的调用现有的一个：

if (window.onload) {
    oldOnload = window.onload;
    window.onload = function() {
        myOnload();
        oldOnload();
    }
} else {
    window.onload = myOnload();
}

myOnload是您要设置的任何功能。在两个文件中都执行此操作，并且两个文件都不会踩到另一个文件。您也可以将所有这些都放到函数中，这样就可以调用例如setOnload(myFunc)以如上所述安全地设置/添加加载。您可以使用此技术添加所需数量的onload处理程序。

关于javascript - 如何将多个(2)JavaScript文件插入HTML页面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43768387/