帶有PrimeFaces的JavaScript OnLoad監聽器

Question

我有一個用PrimeFaces編寫的Web應用程序。 左側導航欄包含指向MP4視頻的鏈接。 我正在嘗試保存上次觀看的視頻的位置，以便用戶不必從頭開始。 示例：用戶觀看10分鐘的視頻1並跳到視頻3並觀看該視頻5分鐘並返回到視頻1.在返回到視頻1時，他應該在第10分鐘開始。現在它被重置爲0。

<h:body onload="PFMedia.pageIndex = 0"> 

     <p:layout fullPage="true"> 

      <p:layoutUnit position="center"> 
       <!--h1 align="center">Part 1: Introduction</h1--> 
       <h1 id="jQuerySampleHeading"/> 
       <!-- Begin Content --> 
       <h2>OPUS Projects Manager's Training Videos</h2> 
       <p>These videos detail the key points for using OPUS Projects. They can be used to:</p> 
       <ol> 
        <li>Preview what OPUS PROJECTS can do, so that you can decide if you want to take Manager's training.</li> 
        <li>Serve as refreshers for those who have completed Manager's Training.</li> 
        <li>Be part of formal OPUS PROJECTS training classes.</li> 
       </ol> 
       <p>Viewing these videos is not an alternate way to obtain the training needed to be a Manager.</p> 
       <p>To receive Manager's Training, please see our <a href="https://www.ngs.noaa.gov/corbin/calendar.shtml">training calendar</a>.</p> 
       <p style="font-weight: bold">This site has been proven to be compatible with Google Chrome and Internet Explorer 11.<br/> 
        Microsoft Edge users may not be able to view this website due to compatibility issues.</p> 
       <div id="chromeVideoContainer" align="center"> 
        <video id="jQueryVideoTag" width="600" height="400" autoplay="true" controls="true"> 
         <!--source id="jQuerySampleVideo" type="video/mp4"/--> 
         <source src="https://www.ngs.noaa.gov/corbin/class_description/videos/Part1_Intro.mp4" type="video/mp4"/> 
        </video> 
       </div> 
      </p:layoutUnit><br/> 
      <a href="createProject.xhtml">Next Video</a> 
     </p:layout> 

    </h:body> 

var PFMedia = {}; 

$(window).on("load", PFMedia.initPage()); 
$(window).on("load", PFMedia.loadUserSession(PFMedia.pageIndex)); 

PFMedia.initPage = function() { 
$("#jQueryVideoTag").on(
    "timeupdate", 
    function (event) { 
     PFMedia.onTrackedVideoFrame(this.currentTime); 
    }); 

$(window).on("beforeunload", function() { 
    //alert("Page is about to be unloaded, saving user session at time " + PFMedia.currentTime); 
    PFMedia.saveUserSession(PFMedia.pageIndex); 
}); 
}; 

PFMedia.onTrackedVideoFrame = function (currentTime) { 
console.log("Current video time: " + currentTime); 
this.currentTime = currentTime; 
}; 

PFMedia.getPartNumber = function (pageIndex) 
{ 
if (pageIndex <= 2) 
{ 
    pageIndex++; 
} 
return pageIndex; 
}; 

PFMedia.loadUserSession = function (pageIndex) 
{ 
PFMedia.pageIndex = pageIndex; 
console.log(window.body); 
$.ajax({ 
    url: "userSession?cmd=loadSession&videoPage=" + pageIndex, 
    context: window.body 
}).done(function (data) { 
    //alert("Raw XML data: " + data); 
    var videoPosition; 
    xmlDoc = $.parseXML(data); 
    $xml = $(xmlDoc); 
    console.log("XML data: " + data); 
    var jqueryHeader = $("#jQuerySampleHeading"); 
    if (jqueryHeader) 
    { 
     $videoPos = $xml.find("videoPosition"); 
     if ($videoPos) 
     { 
      videoPosition = $videoPos.text(); 
      if (!videoPosition || videoPosition === "") 
      { 
       videoPosition = 0.0; 
       console.log("Could not retrieve video position from the server, using a default of 0.0."); 
      } 
     } 
     else 
     { 
      videoPosition = 0.0; 
      console.log("Could not retrieve video position from the server, using a default of 0.0."); 
     } 
    } 
    var jqueryVideo = document.getElementById("jQueryVideoTag"); 
    if(jqueryVideo) 
    { 
     if(videoPosition > 0.0) { 
      var setPos = window.confirm("You left off at " + videoPosition 
        + ", would you like to continue from there?"); 
      if(setPos) { 
       alert("Starting video at " + videoPosition); 
       jqueryVideo.currentTime = videoPosition; 
      } 
     } 
    } 
    else 
    { 
     console.log("Could not retrieve video tag from HTML document."); 
    } 
}); 
}; 

PFMedia.saveUserSession = function (pageIndex) 
{ 
console.log("Current video time: " + PFMedia.currentTime + 
     ", video " + pageIndex); 
$.ajax({ 
    url: "userSession?cmd=saveSession&videoPage=" + pageIndex + 
      "&videoTime=" + PFMedia.currentTime, 
    context: document.body 
}); 
}; 

Answer 1

$(window).on("load", PFMedia.initPage()); 
$(window).on("load", PFMedia.loadUserSession(PFMedia.pageIndex)); 

你沒有約束力的initPage和loadUserSession用作負載事件處理程序。相反，你立即調用它們，然後試圖綁定他們作爲事件處理程序返回的任何東西。
而是這樣做：

$(window).on("load", PFMedia.initPage); // no braces, because we're not calling initPage 
$(window).on("load", function() { 
    // an anonymous function as handler, so we can call loadUserSession with a parameter 
    PFMedia.loadUserSession(PFMedia.pageIndex); 
});