Onload无法按我预期的那样在HTML Javascript上正常运行

编程问答 2022-08-15

问题描述

我正在开发HTML和Javascript网站。在网站上，我需要使用onload加载一段代码。问题是onload正在正确显示警报消息，但没有显示我真正想要的代码。 这是onload功能代码，可以在下面的代码中找到：

<script type="text/javascript"> 
       function nftlink() 
         { 
         document.getElementById("nftlink1").innerHTML = "<a-nft\r\n type=\"nft\"\r\n url=\"https:\/\/arjsusingweb.web.app\/trex\"\r\n
 smooth=\"true\"\r\n smoothCount=\"10\"\r\n smoothTolerance=\".01\"\r\n
 smoothThreshold=\"5\"\r\n >";
         alert("Image is loaded");
         } 
</script>

有人可以告诉我我做错了什么吗

<!DOCTYPE html>
    <html>
    <head>
        <meat charset="utf-8"/>
        <Meta http-equiv="X-UA-Compatible" content="IE-edge">
        <title>ARJS</title>
        <Meta name="viewport" content="width-device-width",initial-scale=1>
        <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    </head>
    <style>
        .arjs-loader {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(0,0.8);
          z-index: 9999;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      
        .arjs-loader div {
          text-align: center;
          font-size: 1.25em;
          color: white;
        }
      </style>
    
    <body style="margin : 0px; overflow: hidden;" onload="nftlink()">
        <h1>Welcome To The main Area</h1>
        <div class="arjs-loader">
            <div>Loading,please wait...</div>
          </div>
          <a-scene
            vr-mode-ui="enabled: false;"
            renderer="logarithmicDepthBuffer: true;"
            embedded
            arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
          >
            <span id="nftlink1">
              <!-- The onload excicuted code Should Be Here -->
            
            
              <a-entity
                gltf-model="https://arjsusingweb.web.app/scene.gltf"
                scale="25 25 25"
                position="150 150 0"
              >
              </a-entity>
            </span>
            
          </a-scene>
        <script src="firebases.js"></script>
        <script src="main.js"></script>
        <script type="text/javascript"> 
          function nftlink() 
            { 
            document.getElementById("nftlink1").innerHTML = "<a-nft\r\n type=\"nft\"\r\n url=\"https:\/\/arjsusingweb.web.app\/trex\"\r\n smooth=\"true\"\r\n smoothCount=\"10\"\r\n smoothTolerance=\".01\"\r\n smoothThreshold=\"5\"\r\n >";
            alert("Image is loaded");
            } 
        </script>
    </body>
    </html>

解决方法

我通过将脚本移动到标题来修复它

dom-eventsfunctionfunctionfunctionhtmljavascript