javascript 在 body 内不工作但在没有 body 的情况下工作

Question

下面的代码在没有标签的情况下也能完美运行。但同样不适用于 body 标签。请帮助我在 body 标签内工作。

<div id="point1" STYLE="position:absolute;visibility:visible;z-index:1000">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
<a href='image/ddaward.gif'>
<img src="image/ddaward.gif" width=96 height=60 alt="" border="0"></a>            
</td></tr>
<tr><td>
<center><a href="http://www.medisystems.in">
<font face="Arial" size="2" color="#0000FF">C.R. Medisystems</font>
</a></center></td></tr></table>

<script LANGUAGE="JavaScript1.2">

var XX=20; // X position of the scrolling objects
var xstep=1;
var delay_time=60;


var YY=0;  
var ch=0;
var oh=0;
var yon=0;

var ns4=document.layers?1:0
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

if(ie){
YY=document.body.clientHeight;
point1.style.top=YY;
}
else if (ns4){
YY=window.innerHeight;
document.point1.pageY=YY;
document.point1.visibility="hidden";
}
    else if (ns6){
    YY=window.innerHeight
    document.getElementById('point1').style.top=YY
  }


function reloc1()
{

if(yon==0){YY=YY-xstep;}
else{YY=YY+xstep;}
if (ie){
    ch=document.body.clientHeight;
    oh=point1.offsetHeight;
    }
    else if (ns4){
    ch=window.innerHeight;
    oh=document.point1.clip.height;
}
    else if (ns6){
    ch=window.innerHeight
    oh=document.getElementById("point1").offsetHeight
    }

    if(YY<0){yon=1;YY=0;}
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
if(ie){
    point1.style.left=XX;
    point1.style.top=YY+document.body.scrollTop;
    }
    else if (ns4){
    document.point1.pageX=XX;
    document.point1.pageY=YY+window.pageYOffset;
    }
else if (ns6){
    document.getElementById("point1").style.left=XX
    document.getElementById("point1").style.top=YY+window.pageYOffset
    }

}

function onad()
        {
            if(ns4)
            document.point1.visibility="visible";
            loopfunc();
        }
function loopfunc()
        {
        reloc1();
        setTimeout('loopfunc()',delay_time);
    }

    if (ie||ns4||ns6)
    window.onload=onad

 </script>

但是同样的浮动图像代码在 body 标签中不起作用

<html lang="en">
        <head> </head>
        <body>


     <div id="point1" STYLE="position:absolute;visibility:visible;z-
    index:1000">

         <a href='image/ddaward.gif'>
     <img src="image/ddaward.gif" width=96 height=60 alt=""   border="0">
        </a>

        <center><a href="http://www.medisystems.in">

     <font face="Arial" size="2" color="#0000FF">C.R. Medisystems</font>
        </a></center>

        </div>

        <script LANGUAGE="JavaScript1.2">



            var XX=20; // X position of the scrolling objects
            var xstep=1;
            var delay_time=60;

          //Begin of the unchangable area, please do not modify this area
           var YY=0;  
           var ch=0;
           var oh=0;
           var yon=0;

           var ns4=document.layers?1:0
           var ie=document.all?1:0
           var ns6=document.getElementById&&!document.all?1:0

        if(ie){
            YY=document.body.clientHeight;
            point1.style.top=YY;
          }
            else if (ns4){
             YY=window.innerHeight;
            document.point1.pageY=YY;
            document.point1.visibility="hidden";
           }
            else if (ns6){
              YY=window.innerHeight
             document.getElementById('point1').style.top=YY
            }


            function reloc1()
               {

              if(yon==0){YY=YY-xstep;}
              else{YY=YY+xstep;}
                if (ie){
                  ch=document.body.clientHeight;
                  oh=point1.offsetHeight;
               }
                 else if (ns4){
                    ch=window.innerHeight;
                    oh=document.point1.clip.height;
                }
                else if (ns6){
                   ch=window.innerHeight
                  oh=document.getElementById("point1").offsetHeight
             }

              if(YY<0){yon=1;YY=0;}
               if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
                 if(ie){
                     point1.style.left=XX;
                     point1.style.top=YY+document.body.scrollTop;
                    }
                     else if (ns4){
                          document.point1.pageX=XX;
                         document.point1.pageY=YY+window.pageYOffset;
                      }
                       else if (ns6){
                         document.getElementById("point1").style.left=XX
                document.getElementById("point1").style.top=YY+window.pageYOffset
                }

             }

              function onad()
                 {
                  if(ns4)
                   document.point1.visibility="visible";
                  loopfunc();
                  }
              function loopfunc()
                  {
                    reloc1();
                   setTimeout('loopfunc()',delay_time);
                 }

              if (ie||ns4||ns6)
                 window.onload=onad

              </script>


        </body>
        </html>

Answer 1

这是一个更干净的版本

我删除了 2000 年的所有代码（NS4 是 1997 年，NS6 是 2000 年）并使用 addEventlListener 而不是 window.onload

我将内联 CSS 提取到样式表中

使用 addEventListener 并在其中访问 DOM 而不是使用内联 document.getElementById 是我的代码无论您将其放置在文档中的哪个位置都能正常工作的原因

var XX = 20; // X position of the scrolling objects
var xstep = 1;
var delay_time = 60;

//Begin of the unchangable area, please do not modify this area
var YY = 0;
var ch = 0;
var oh = 0;
var yon = 0;

YY = window.innerHeight


function reloc() {
  var point1 = document.getElementById("point1");

  if (yon == 0) {
    YY = YY - xstep;
  } else {
    YY = YY + xstep;
  }
  ch = window.innerHeight;
  oh = point1.offsetHeight;

  if (YY < 0) {
    yon = 1;
    YY = 0;
  }
  if (YY >= (ch - oh)) {
    yon = 0;
    YY = (ch - oh);
  }
  var top = YY + window.pageYOffset;
  point1.style.left = XX + "px";
  point1.style.top = top + "px";

}

window.addEventListener("load", function() {
  var point1 = document.getElementById('point1');
  point1.style.top = YY + "px";
  point1.visibility = "visible";
  setInterval(reloc, delay_time);
})

#point1 {
  position: absolute;
  z-index: 1000;
  text-align: center;
  font-family: Arial;
  color: #0000FF;
}

a {
  text-decoration: none;
}

<div id="point1">
  <a href='image/ddaward.gif'><img 
    src="https://woodhousevideoproduction.com/wp-content/uploads/2017/01/DDAWards-200x200.jpg" width=96 height=60 alt="" border="0" />
  </a><br/>
  <a href="http://www.medisystems.in">C.R. Medisystems</a>
</div>

javascript 在 body 内不工作但在没有 body 的情况下工作

javascript inside body not working but working without body

javascript

document-body