加載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