xul转换html,HTML in XUL for rich tooltips

Insert the appropriate code from below into your XUL overlay. This example is what the final XUL overlay could look like, assuming a JavaScript overlay titled overlay.js:

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

xmlns:html="http://www.w3.org/1999/xhtml">

οnmοuseοver="htmltip.onMouseTooltip(event)"

tooltip="myHTMLTip"

/>

οnmοuseοver="htmltip.onMouseTooltip(event)"

tooltip="myHTMLTip"

/>

Insert your version of the following into the JavaScript overlay. Our customized tooltipHTML attribute for each element can be set at any time.

var htmltip = {

onLoad: function() {

//at any point you can save an HTML string to a XUL attribute for later injection into the tooltip

document.getElementById("htmltip1").setAttribute("tooltipHTML", "red foo")

document.getElementById("htmltip2").setAttribute("tooltipHTML", "green foo")

},

onMouseTooltip: function(event) {

//get the HTML tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip)

var txt = event.target.getAttribute("tooltipHTML");

// get the HTML div element that is inside the custom XUL tooltip

var div = document.getElementById("myHTMLTipDiv");

//clear the HTML div element of any prior shown custom HTML

while(div.firstChild)

div.removeChild(div.firstChild);

//safely convert HTML string to a simple DOM object, stripping it of JavaScript and more complex tags

var injectHTML = Components.classes["@mozilla.org/feed-unescapehtml;1"]

.getService(Components.interfaces.nsIScriptableUnescapeHTML)

.parseFragment(txt, false, null, div);

//attach the DOM object to the HTML div element

div.appendChild(injectHTML);

}

}

window.addEventListener('load', htmltip.onLoad, false);

In the XUL overlay, xmlns:html is used to enable HTML tags to be used inside the XUL. Our enhanced XUL tooltip is an element that is written ahead of time, and it contains an HTML div element whose type attribute lowers its privileges to being that content element, although it is an element of chrome. This is recommended for security reasons, especially if remote HTML is to be inserted.

A number of menuitems have a tooltip attribute pointing to the same tooltip. That tooltip is empty now, but we will use the mouseover event to dynamically populate the tooltip (which is about to be shown) with a different message for each menuitem. This is done by calling the onMouseTooltip function, which will take the tooltipHTML attribute of the element that is being hovered over and safely convert that into DOM and inject it into the tooltip that will soon be shown. The tooltipHTML attribute is an HTML string which is set sometime beforehand for each element. For security reasons, the conversion will strip out some of the more dangerous elements in the HTML string, like JavaScript and iframes.