HtmlContent

HtmlContent is a control that displays HTML content defined in a web page's HTML source. Using an HtmlContent is a convenient way to specify a large amount of HTML.

The content property of a control can be used to specify HTML content, but it's not desirable to place a large amount of content in a components block: 

components: [
  {content: "This is some short text."}
]

Instead, use an HtmlContent. In an application's index.html file, place the content in a <div> and give the <div> an id. For example: 

<body>
  <div id="myContent">This could be a <b>large</b> chunk of <a href="http://www.w3.org/html">HTML</a>.</div>
</body>

Then, in a kind's components block, reference the content via the srcId property: 

{kind: "HtmlContent", srcId: "myContent", onLinkClick: "htmlContentLinkClick"}

(Note: Remember that in web page parsing, elements in the page defined after a <script> element aren't accessible to the script, as they've not yet been parsed and added to the DOM. So you should define the content-containing <div> elements in your document's body before the <script> tag creates the application objects.)

HtmlContent provides special handling for links. Instead of navigating to the web page specified in a link when it is clicked, an onLinkClick event is generated. The second event argument is the URL of the link: 

htmlContentLinkClick: function(inSender, inUrl) {
  // do something when the link is clicked.
  this.$.webView.setUrl(inUrl);
}

Published Properties

Name Default Description
srcId "" Optional ID of an element in the page from which to pull HTML content. If not set, the HtmlContent acts like an enyo.Control whose allowHtml property is set to true.

Published Events

Name Default Description
onLinkClick "" Event sent when a link inside the HtmlContent is clicked.