HTML and CSS Reference
In-Depth Information
Notice that I have used the size attribute on the select element so that several
choices are shown at once. This is the Metro convention for select elements that are part of the
main application layout. However, for flyouts, such as the one I created earlier in this chapter, the
convention is a single-line select that opens a drop-down list of options.
Displaying External Content
The WinJS page feature works only on content that is part of the application. You will generate
an error if you request an external URL using the WinJS.UI.Pages.render method. Instead, you
must use an iframe element if you want to display an external HTML document, but you can
combine this element with the WinJS page feature if you want to get the benefit of breaking your
application down into small and manageable pieces. To demonstrate this, I have created a new
file in the html directory called storeDetail.html . Listing 3-16 shows the contents of this file.
Listing 3-16. The storeDetail.html File
<!DOCTYPE html>
<div id="noStoreSelectionContainer" class="win-type-x-large">
<p>Select an item on the list</p>
<div id="storeSelectionContainer">
<iframe id="storeFrame" seamless sandbox=""></iframe>
This is a simple document that acts as a wrapper around the iframe element and a place-
holder element to display when no list item has been selected. The most important element is,
of course, the iframe . he seamless attribute specifies that no border should be drawn around
the iframe , and setting the sandbox attribute to the empty string prevents the embedded con-
tent from running any scripts, navigating to new pages, and submitting forms. I am going to
use the iframe to display the home page of the grocery store associated with the selected item.
These pages contain all sorts of tracking scripts and some very exception-prone code, all of
which I want to spare my user from having to deal with.
Adding the Callback
I am going to use the same approach for defining a callback as I did when loading a fragment.
I have added the callback function to the pages.js file, and you can see the additions in Listing
Search WWH ::

Custom Search