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>