blob: d9a09c67b632dc1cad752164ef18f2bd974a4370 [file] [log] [blame]
<!DOCTYPE html>
Copyright (c) 2011 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
<title>Load Progress Example</title>
<script type="text/javascript" src="../common/check_browser.js"></script>
<script type="text/javascript">
// Check for Native Client support in the browser before the DOM loads.
var isValidBrowser = false;
var browserSupportStatus = 0;
var checker = new browser_version.BrowserChecker(
14, // Minumum Chrome version.
loadProgressModule = null; // Global application object.
statusText = 'NO-STATUS';
isValidBrowser = checker.getIsValidBrowser();
browserSupportStatus = checker.getBrowserSupportStatus();
// Handler that gets called when the NaCl module starts loading. This
// event is always triggered when an <EMBED> tag has a MIME type of
// application/x-nacl.
function moduleDidStartLoad() {
// Progress event handler. |event| contains a couple of interesting
// properties that are used in this example:
// total The size of the NaCl module in bytes. Note that this value
// is 0 until |lengthComputable| is true. In particular, this
// value is 0 for the first 'progress' event.
// loaded The number of bytes loaded so far.
// lengthComputable A boolean indicating that the |total| field
// represents a valid length.
// event The ProgressEvent that triggered this handler.
function moduleLoadProgress(event) {
var loadPercent = 0.0;
var loadPercentString;
if (event.lengthComputable && > 0) {
loadPercent = event.loaded / * 100.0;
loadPercentString = loadPercent + '%';
} else {
// The total length is not yet known.
loadPercent = -1.0;
loadPercentString = 'Computing...';
appendToEventLog('progress: ' + loadPercentString +
' (' + event.loaded + ' of ' + + ' bytes)');
// Handler that gets called if an error occurred while loading the NaCl
// module. Note that the event does not carry any meaningful data about
// the error, you have to check lastError on the <EMBED> element to find
// out what happened.
function moduleLoadError() {
appendToEventLog('error: ' + loadProgressModule.lastError);
// Handler that gets called if the NaCl module load is aborted.
function moduleLoadAbort() {
// When the NaCl module has loaded indicate success.
function moduleDidLoad() {
loadProgressModule = document.getElementById('load_progress');
// Handler that gets called when the NaCl module loading has completed.
// You will always get one of these events, regardless of whether the NaCl
// module loaded successfully or not. For example, if there is an error
// during load, you will get an 'error' event and a 'loadend' event. Note
// that if the NaCl module loads successfully, you will get both a 'load'
// event and a 'loadend' event.
function moduleDidEndLoad() {
var lastError =;
if (lastError == undefined || lastError.length == 0) {
lastError = '&lt;none&gt;';
appendToEventLog('lastError: ' + lastError);
// Handle a message coming from the NaCl module.
function handleMessage(message_event) {
// Set the global status message. Updates the 'status_field' element with
// the new text.
// opt_message The message text. If this is null or undefined, then
// attempt to set the element with id 'status_field' to the value of
// |statusText|.
function updateStatus(opt_message) {
if (opt_message)
statusText = opt_message;
var statusField = document.getElementById('status_field');
if (statusField) {
statusField.innerHTML = statusText;
// Append an event name to the 'event_log_field' element. Event names
// are separated by a <br> tag so they get listed one per line.
// logMessage The message to append to the log.
function appendToEventLog(logMessage) {
var eventLogField = document.getElementById('event_log_field');
if (eventLogField.innerHTML.length == 0) {
eventLogField.innerHTML = logMessage;
} else {
eventLogField.innerHTML = eventLogField.innerHTML +
'<br />' +
<h1>Native Client Load Event Example</h1>
<h2>Event Log</h2>
<div id="event_log_field"></div>
<div id="status_field">NO-STATUS</div>
<div id="listener">
<script type="text/javascript">
var listener = document.getElementById('listener');
listener.addEventListener('loadstart', moduleDidStartLoad, true);
listener.addEventListener('progress', moduleLoadProgress, true);
listener.addEventListener('error', moduleLoadError, true);
listener.addEventListener('abort', moduleLoadAbort, true);
listener.addEventListener('load', moduleDidLoad, true);
listener.addEventListener('loadend', moduleDidEndLoad, true);
listener.addEventListener('message', handleMessage, true);
switch (browserSupportStatus) {
case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
appendToEventLog('Native Client plugin enabled.');
case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
updateStatus('UNKNOWN BROWSER');
case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD:
'Chrome too old: You must use Chrome version 14 or later.');
updateStatus('NEED CHROME 14 OR LATER');
case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED:
'NaCl disabled: Native Client is not enabled.<br>' +
'Please go to <b>chrome://plugins</b> and enable Native Client ' +
updateStatus('NaCl NOT ENABLED');
case browser_version.BrowserChecker.StatusValues.NOT_USING_SERVER:
'file: URL detected, please use a web server to host Native ' +
'Client applications.');
updateStatus('NaCl NOT ENABLED');
appendToEventLog('Unknown error: Unable to detect browser and/or ' +
'Native Client support.');
updateStatus('UNKNOWN ERROR');
<!-- Load the published .nexe. This includes the 'src' attribute which
shows how to load multi-architecture modules. Each entry in the "nexes"
object in the .nmf manifest file is a key-value pair: the key is the runtime
('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.
To load the debug versions of your .nexes, set the 'src' attribute to the
_dbg.nmf version of the manifest file.
Note: The <EMBED> element is wrapped inside a <DIV>, which has both a 'load'
and a 'message' event listener attached. This wrapping method is used
instead of attaching the event listeners directly to the <EMBED> element to
ensure that the listeners are active before the NaCl module 'load' event
fires. This also allows you to use PPB_Messaging.PostMessage() (in C) or
pp::Instance.PostMessage() (in C++) from within the initialization code in
your NaCl module.
<embed name="nacl_module"
width=0 height=0
type="application/x-nacl" />
<script type="text/javascript">
loadProgressModule = document.getElementById('load_progress');
// Futher diagnose NaCl loading.
if (loadProgressModule == null ||
typeof loadProgressModule.readyState == 'undefined') {
switch (browserSupportStatus) {
case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:
// The NaCl plugin is enabled and running, it's likely that the flag
// isn't set.
'NaCl flag disabled: The Native Client flag is not enabled.<br>' +
'Please go to <b>chrome://flags</b> enable Native Client and ' +
'relaunch your browser. See also: ' +
'<a href="' +
'running.html">Running Web Applications that Use Native Client' +
updateStatus('NaCl NOT ENABLED');
case browser_version.BrowserChecker.StatusValues.UNKNOWN_BROWSER:
appendToEventLog('Native Client applications are not supported by ' +
'this browser.');
appendToEventLog('Unknown error when loading Native Client ' +