Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

WinJS.UI.HtmlControl object

Applies to Windows and Windows Phone

Enables you to include an HTML page dynamically. As part of the constructor, you must include an option that indicates the URI of the page.

Syntax


<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: 'page.html'}"></div>


var object = new WinJS.UI.HtmlControl(element, {uri: 'page.html'});

Members

The HtmlControl object has these types of members:

Constructors

The HtmlControl object has these constructors.

ConstructorDescription
HtmlControl

Initializes a new instance of HtmlControl to define a new page control.

 

Examples

The following HTML shows the kind of content that can be loaded by using HtmlControl declaratively.


<!-- Include this file in your project.
<!-- samplePageControl.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>samplePageControl</title>
</head>
<body>
    <div class="samplePageControl">
        <p class="samplePageControl-text"><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
        <button class="samplePageControl-button" style="background-color: green">Click</button></p>
        <p>Page controls can also contain WinJS controls. They are activated automatically, like the toggle switch below.</p>
        <div class="samplePageControl-toggle" data-win-control="WinJS.UI.ToggleSwitch"></div>
    </div>
</body>
</html>


Add the following HTML to the body of the default.html page of your project.


<div class="samplePageControl">
    <p><span data-win-bind="textContent: controlText">This is an HtmlControl. </span>
    <button style="background-color: green">Click</button></p>
    <p>Page controls can also contain WinJS controls. They are activated automatically, like the toggle switch below.</p>
    <div data-win-control="WinJS.UI.ToggleSwitch"></div>
</div>

When you run the app, you should see the button, text, and toggle switch. To remove this content, set the DIV element's innerHtml property to the empty string ("").

If you want to load the HtmlControl programmatically and not declaratively, use the HtmlControl constructor in the following code for the same samplePageControl.html page.


<div id="controlDiv"></div>
<script type="text/javascript">
    var htmlControl = new WinJS.UI.HtmlControl(document.getElementById("controlDiv"), {uri: 'samplePageControl.html'});
    WinJS.UI.processAll();
</script>

Requirements

Minimum supported client

Windows 8.1 [Windows Store apps only]

Minimum supported server

Windows Server 2012 R2 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Base.js

See also

Quickstart: Adding page controls

 

 

Show:
© 2014 Microsoft