如何在html页面中插入多(2)个javascript文件

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

​

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

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

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处理程序。