Using the Default HTML File

The default.html file provides the entry point for the application and the layout of the player app.

The default.html file provides the entry point for the application and the layout of the player app. For a Window 8 app we use two different HTML files (default.html and player.html). In the default.html file you need to do the following:
Within the player.html file:
  1. Specify the div container and give it a div id. The div contains the app and the basic layout definition of the app. In this case the app is the player.
  2. Place another container, the iframe within the pair of div tags. Specify an id or name for the iframe.
  3. You specify the reference to the player inside the iframe container.

What is IFrame?

The Windows 8 iframe works as a floating frame or container. You are able to access the contents of an iframe through a read or write to the elements within the iframe. For more information about the Windows 8 iframe, see the “Iframe Element” topic in the Microsoft Windows 8 UI Developer Guide. Since the Windows 8 model uses these separate sandboxes for apps, you need to be able to reference the player.html file or you will not be able to see a newly loaded player in the default.html because one file is local and the other remote.

Example: Default.HTML File

In the following example, a div is created within a body tag and given the div id of playerContainer. Within a specified iframe container, the player.html file is referenced. This file contains the reference to the embedded player.

 
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>OOView</title>

   <!-- WinJS references -->
   <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
   <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
   <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

   <!-- OOView references -->
   <link href="/css/default.css" rel="stylesheet" />
   <script src="/js/default.js"></script>
</head>
<body>
   <div id="playerContainer">
       <iframe id="ooplayer" src="ms-appx-web:///player.html" width="100%" 
       height="100%"></iframe>
   </div>
</body>
</html>