staticHTML property

The static HTML property allows you to get/set filtered HTML directly on the DOM object you’re using. The browser vendors don’t support this property yet, IE has a toStaticHTML function and Firefox via the Noscript plugin emulates toStaticHTML but doesn’t allow you to set/get directly, so I decided to create a JavaScript version that can provide it until the vendors implement it. As I was updating HTMLReg and CSSReg with some new features I thought this might be a good time to add support for it. The problem with static HTML is you have no way to protect an element from overlapping another element. The traditional way HTMLReg protects against this problem is to have a container element that is restricted via CSS to certain dimensions and it’s overflow hidden thus not allowing you to break out of that element via absolute positioning etc.

It’s not possible to have a container for every element so I couldn’t figure out a way to stop this overlapping problem, so each time an element is modified you cannot alter it’s dimensions or position. If you want to have a section of your HTML that you want to allow user input to alter dimensions then you can place a container div like so:


<div id="staticHTML" style="border:1px solid #ccc;position:relative;width:300px;height:300px;overflow:hidden;"></div>


This way the modified HTML can’t break out of this element so any modification of staticHTML inside this element should be safe. You’d need to modify the HTMLReg could when you include it on your site in order to modify dimensions nand positioning like so:


if(Element.prototype && !Element.prototype.staticHTML) {
window.Object.defineProperty(Element.prototype, 'staticHTML', {
get: function() {
HTMLReg.setAppID('staticHTML');
HTMLReg.disablePositioning = false;//changed this line!
return HTMLReg.parse(this.innerHTML+'');
},
set: function(val) {
HTMLReg.setAppID('staticHTML');
HTMLReg.disablePositioning = false;//changed this line!
this.innerHTML = HTMLReg.parse(val+'');
}
});
}


To use the property itself you just read and write to the staticHTML property of the DOM object. You can read the staticHTML property without actually altering the DOM object’s innerHTML. Examples below:

document.getElementById('x').staticHTML='<b>test</b>';
alert(document.getElementById('x').staticHTML)

Finally there is the demo and the usual question. Can you break it?
Static HTML demo

Update….

Oh yeah I got it working in IE7 :O how awesome is that? 😀 via htc