css Javascript加载时所有内容都会消失[重复]

vngu2lb8  于 2022-12-20  发布在  Java
关注(0)|答案(1)|浏览(153)
    • 此问题在此处已有答案**:

document.write() overwriting the document?(2个答案)
What does document.write() do?(3个答案)
Why is document.write considered a "bad practice"?(17个答案)
2小时前关门了。
当我通过Body onload="playVideo();"启动功能时,视频结束后,网站上的一切都消失了,除了背景视频。
我的功能(启动随机视频):

function playVideo() {
  var videos = [
    '1.mp4',
    'Lil Pump - _Gucci Gang_ (Official Music Video).mp4',
  ];
  var reloadCss = '<link rel="stylesheet" href="video.css"/>'
  var index = Math.floor(Math.random() * videos.length);
  var html = '<video autoplay="autoplay" preload="true" id="Background" onended="playVideo()"><source src="Videos/' + videos[index] + '" type="video/mp4"></video>';
  document.write(html);
  document.write(reloadCss);
}
laik7k3q

laik7k3q1#

您的页面将被替换为使用document.write放置的视频html。
W3schools表示此文档。写入:
write()方法将HTML表达式或JavaScript代码写入文档。
write()方法主要用于测试:如果在HTML文档完全加载后使用它,它将删除所有现有的HTML。
您可以使用jQuery append函数添加动态html,就像您正在尝试做的那样。请看下面的代码片段,您的video和script标记只是显示为空白,但您可以看到append方法只是添加html,而不是像评论建议的那样替换页面。
如果你想使用vanilla javascript,你也可以使用javascript appendChild() function

$(function(){
  //Run your playvideo function on page load
  playVideo();
})

function playVideo() {
  var videos = [
    '1.mp4',
    'Lil Pump - _Gucci Gang_ (Official Music Video).mp4',
  ];
  var reloadCss = '<link rel="stylesheet" href="video.css"/>'
  var index = Math.floor(Math.random() * videos.length);
  var html = '<video autoplay="autoplay" preload="true" id="Background" onended="playVideo()"><source src="Videos/' + videos[index] + '" type="video/mp4"></video>';
  
  //Use append rather than setting the document html to add
  //elements. Otherwise the whole page html will be replaced
  $content = $(".content");
  $content.append(html);
  $content.append(reloadCss);
  $content.append("<p>More content</p>");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="content">
        <p>Content</p>
    </div>
  </body>
</html>

相关问题