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

Question

我有一个 HTML 页面，并且有两个要插入的文件。

<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;
};

其中一个在单击按钮时将您带到 session 存储，另一个在单击按钮时验证电话号码。

但是，当我刚刚使用上面的脚本时，它只运行其中之一。

Answer 1

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

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

其中 myOnload 是您尝试设置的任何函数。在两个文件中都这样做，两者都不会踩到对方的脚趾。您还可以将所有这些放入一个函数中，这样您就可以调用例如setOnload(myFunc) 如上所述安全地设置/添加 onload。您可以使用此技术根据需要添加任意数量的 onload 处理程序。