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

vngu2lb8 于 2022-12-20 发布在 Java

关注(0)|答案(1)|浏览(154)

- 此问题在此处已有答案**：

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);
}

css

来源：https://stackoverflow.com/questions/46992378/everything-disappears-on-javascript-load

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2022-12-20

我来回答

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

1条答案

相关问题

热门标签

最新问答