加载Java脚本后一切都消失了

Question

当我通过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);
}

Answer 1

您的页面已替换为通过document.write放置的视频html。

W3schools说了有关document.write的内容：

write（）方法将HTML表达式或JavaScript代码写入文档。

write（）方法主要用于测试：如果在完全加载HTML文档后使用它，它将删除所有现有的HTML。

您可以像尝试使用的那样，使用jQuery append函数添加动态html。 请参见下面的代码片段，以获取快速示例。 您的视频和脚本标签只是显示为空白，但是您可以看到append方法仅添加html而不是像建议的注释那样替换页面。

如果要使用普通javascript，也可以使用javascript appendChild（）函数。

 $(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>

加载Java脚本后一切都消失了

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-10-28 17:29:36

加载Java脚本后一切都消失了

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-10-28 17:29:36

解决方案1
0 已采纳 2017-10-28 17:29:36