Question

基于w3schools，HTML onload属性支持链接标记，因此我在加载链接时尝试加载javascript函数。问题是onload属性不会触发该函数。没有错误。为什么是这样？对于菜鸟问题，我感到抱歉。

我尝试在正文中使用onload，并且有效。但是，当我尝试在链接标签（例如link或标签）中使用onload时，此操作将无效。

<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="shortcut icon" href="static/favicon.ico"> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>

<div class="container" id="TheForm">
  <div class="row">
    <div class="col-sm-6">
      <h1><img src="static/Lab_Logo_v6c.png" style="width: 120px; float: left;margin-right: 20px;margin-left: -16px;margin-top: -40px;border: 10px">Author List Script</h1>
      <br><br><br>
      <p>Download the template file below and re-upload with your custom author information:</p>
      <br>
      <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br>
        <form action="" id="myform" method=post enctype=multipart/form-data>
           <input type=file name=file value="Choose File">
           <p class='error_message'></p>
        </form>
         <div id="buttonDiv">
            <p>Mark affiliations with:</p> 
            <input type="radio" name="affiliation" value="number" data-key='affiliation' data-value='number' class="form-radio main_checkbox" checked><label for="number">Number</label><br> 
            <input type="radio" name="affiliation" value="letter" data-key='affiliation' data-value='letter' class="form-radio main_checkbox"><label for="letter">Letter</label><br> 
           <p>Separate initials with period:</p> 
           <input type="radio" name="period" value="separated" data-key='period' data-value='yes' class="form-radio period"><label for="period">Yes</label><br> 
           <input type="radio" name="period" data-key='period' data-value='no' value="separated" class="form-radio period" checked><label for="period">No</label> 
           <br> 
           <p>Separate initials with space:</p> 
           <input type="radio" name="space" value="separated" data-key='space' data-value='yes' class="form-radio spacing"><label for="space">Yes</label><br> 
           <input type="radio" name="space" data-key='space' data-value='no' value="separated" class="form-radio spacing" checked><label for="space">No</label><br> 
        </div>
        <button class='submit_data'>Submit</button>
        </div>
        <div class="col-sm-6">
          <div>
          <h1>Results</h1>
          <p class="my-results"></p>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('#TheForm').on('click', '.submit_data', function(){
          var form_data = new FormData($('#myform')[0]);
          var flag = true;

          $.ajax({
            type: 'POST',
            url: '/process_file',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
              if (data.result === 'False'){
                $('.error_message').html(data.message)
                flag = false;
              }
            },
          });

          var payload = {};

          $('.form-radio').each(function(){
            if ($(this).prop('checked')){
              payload[$(this).data('key')] = $(this).data('value');
            }
          });

          $.ajax({
            url: "/upload_vals",
            type: "get",
            data: {'payload':JSON.stringify(payload)},
            success: function(response) {
              $(".my-results").html(response.data);
            },
          });
        });
      });
    </script>

</body>
</html>

链接加载后，我需要运行一个函数。在此示例中，它将在控制台中打印“ Hello”。

Answer 1

标签没有onload属性。请参阅我评论中的链接。

The onload event is fired just on these elements:  
   <body>, <frame>, <iframe>,
 <img>, <input type="image">,
 <link>, <script>, and <style>

Answer 2

基于https://www.w3schools.com/tags/ev_onload.asp的onload事件属性可以与标签一起使用：

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

您使用<link>标签不。您正在使用不支持此属性的anchor（<a>）标记！ <link>标签用于将外部资源链接到文档。例如CSS文件。

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

Answer 3

当网页完全加载了所有内容（包括图像，脚本文件，CSS文件等）后，

onload通常在元素内用于执行脚本。但是，它也可以用于其他元素（请参见下面的“支持的HTML标签”）。

Supported HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>

链接元素中的HTML onload事件不起作用

3 个答案: