Question

这是网站的一个例子。一切都在一个HTML文档中完成，效果很好。当我将.js .html和.css分开时，会发生脚本在元素的dom之前加载而我无法使用按钮。当我把它（）放在关闭身体标签的正上方时，它也可以工作。我想把我的src脚本放在头上。 HTML

＆＃13;

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function()  {
    modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
};

＆＃13;

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Something new</title>
    <meta name="viewport" content="width=device-width initial-scale=1.0;">
    <link rel="stylesheet" href="style-ourwork.css" type="text/css">
    <script src="js-ourwork.js"></script>
</head>
<body>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
    </div>

</div>
<script src="js-ourwork.js"></script>
</body>
</html>

＆＃13;

＆＃13; 我知道window.onload = function（）但是在这里调用哪个函数。

Answer 1

在</body>标记之前添加脚本标记有助于在运行脚本时使DOM可用。必须加载DOM才能与其进行交互（特别是，当您尝试与它们交互时，目标元素必须存在）。

将您的脚本添加到<head>标记，然后将其执行推迟到window.onload可能会减慢页面的感知加载时间，并且脚本通常会在以后运行如果你只是把它放在</body>标签之前。您还需要管理您的调用，因为多个window.onload = function() {};语句将导致事件被覆盖。

您可能还想看一下JavaScript模块，因为它们可以成为异步加载脚本的流行机制，现在已成为ECMAScript标准的一部分。

Answer 2

在你的js文件中将所有内容包装在下面的

中

(function(obj){
    // Your code here
})(window);

这将使它等到Dom加载执行

与jQuery的相同

$(document).ready(function(){})

您应该考虑将脚本标记保留在正文的底部。将它们放在head标签中可以减慢初始页面加载速度，因为js变大了。

即。 Dom不会加载，直到head标签中的所有内容都被下载，这样你的用户才会看到一个空白的屏幕，直到你的js被加载。

如果你把它放在身体标签的底部，他们会在加载js之前看到你的页面。

dom元素在脚本之前加载

2 个答案: