1<!DOCTYPE html> 2<html> 3 <!-- 4 Copyright (c) 2013 The Chromium Authors. All rights reserved. 5 Use of this source code is governed by a BSD-style license that can be 6 found in the LICENSE file. 7 --> 8<head> 9 10 <title>hello_tutorial</title> 11 12 <script type="text/javascript"> 13 HelloTutorialModule = null; // Global application object. 14 statusText = 'NO-STATUS'; 15 16 // Indicate load success. 17 function moduleDidLoad() { 18 HelloTutorialModule = document.getElementById('hello_tutorial'); 19 updateStatus('SUCCESS'); 20 } 21 22 // The 'message' event handler. This handler is fired when the NaCl module 23 // posts a message to the browser by calling PPB_Messaging.PostMessage() 24 // (in C) or pp::Instance.PostMessage() (in C++). This implementation 25 // simply displays the content of the message in an alert panel. 26 function handleMessage(message_event) { 27 alert(message_event.data); 28 } 29 30 // If the page loads before the Native Client module loads, then set the 31 // status message indicating that the module is still loading. Otherwise, 32 // do not change the status message. 33 function pageDidLoad() { 34 if (HelloTutorialModule == null) { 35 updateStatus('LOADING...'); 36 } else { 37 // It's possible that the Native Client module onload event fired 38 // before the page's onload event. In this case, the status message 39 // will reflect 'SUCCESS', but won't be displayed. This call will 40 // display the current message. 41 updateStatus(); 42 } 43 } 44 45 // Set the global status message. If the element with id 'statusField' 46 // exists, then set its HTML to the status message as well. 47 // opt_message The message test. If this is null or undefined, then 48 // attempt to set the element with id 'statusField' to the value of 49 // |statusText|. 50 function updateStatus(opt_message) { 51 if (opt_message) 52 statusText = opt_message; 53 var statusField = document.getElementById('statusField'); 54 if (statusField) { 55 statusField.innerHTML = statusText; 56 } 57 } 58 </script> 59</head> 60<body onload="pageDidLoad()"> 61 62 <h1>NaCl C++ Tutorial: Getting Started</h1> 63 <p> 64 <!-- 65 Load the published pexe. 66 Note: Since this module does not use any real-estate in the browser, its 67 width and height are set to 0. 68 69 Note: The <embed> element is wrapped inside a <div>, which has both a 'load' 70 and a 'message' event listener attached. This wrapping method is used 71 instead of attaching the event listeners directly to the <embed> element to 72 ensure that the listeners are active before the NaCl module 'load' event 73 fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or 74 pp::Instance.PostMessage() (in C++) from within the initialization code in 75 your module. 76 --> 77 <div id="listener"> 78 <script type="text/javascript"> 79 var listener = document.getElementById('listener'); 80 listener.addEventListener('load', moduleDidLoad, true); 81 listener.addEventListener('message', handleMessage, true); 82 </script> 83 84 <embed id="hello_tutorial" 85 width=0 height=0 86 src="hello_tutorial.nmf" 87 type="application/x-pnacl" /> 88 </div> 89 </p> 90 91 <h2>Status <code id="statusField">NO-STATUS</code></h2> 92</body> 93</html> 94