为什么会这样呢? (JavaScript加载问题。。)

时间:2020-01-04 13:57:28

标签: javascript

说明:

我是尝试这些代码的新手。 Javascript Hello World尝试。 仅第6、22、23、24行(“脚本”标签)很重要。 我指的是另一个js文件“ a1.js” a1.js中的所有内容只有一行:“ alert(1)”。

问题是:

我单击打开chrome(版本78.0.3904.108)中的html文件,结果使我感到困惑: 它的 弹出“ 1”,然后弹出“ 3”,并在浏览器中显示单词“ Hello World”。

为什么我看不到警报(2)弹出?

我可以将Javacript放在html标头和html正文中的任意位置的脚本标签中,并按加载的顺序放置吗?

<!doctype html>
<html lang="en">
  <head>
  
    <!-- THIS IS THE WIERD PART I -->
    <script src="a1.js"/>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
    
  </head>
  <body>
  
    <!-- THIS IS THE WIERD PART, MAYNE SOMETHING WRONG  -->
    <script>alert(2)</script>
    <h1>Hello, world!</h1>
    <script>alert(3)</script>

    
    <!-- NOTHING SPECIAL IN THIS PART -->    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    
    <!-- END --> 
  </body>
</html>

2 个答案:

答案 0 :(得分:4)

<script>不是自动关闭标签。您需要更改此行:

<script src="a1.js"/>

对此:

<script src="a1.js"></script>

在您的<head>

答案 1 :(得分:3)

问题仅来自第一个script标签,即是否替换:

<script src="a1.js"/>

使用

<script src="a1.js"></script>

那么您应该观察到正常行为。

乍一看,这听起来可能有点奇怪(因为从XML的角度来看,第一种语法格式正确),但是<script>不是HTML中的自闭标签,例如其他StackOverflow答案:Why don't self-closing script elements work?; that blog article提供了有关无效标记的更多详细信息。