Difference between revisions of "CSS Independent Content"

From GreaseSpot Wiki
Jump to navigationJump to search
(Made explanation more to the point.)
(Now with working code :p)
Line 1: Line 1:
Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.
Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.


One solution is to do your stuff in an iframe:
The solution is to add your code inside an iframe. This is a bit tricky. Example code:


  /* Creates and returns an element by name and sets its attributes from a hash */
// position:fixed means it scrolls along with the page. The z-index is necessary on sites
  function tag( name, attr ) {
// like Wikipedia and GreaseSpot. The border is just a border. The rest of the CSS centers
    var node = doc.createElement( name );
// the iframe horizontally and vertically.
    attr = attr || {};
var css = 'position:fixed; top:50%; left:50%; width:30em; height:20em; margin-left:-15em;' +
    for( var i in attr )
          'margin-top:-10em; border:1px solid #000; z-index:9999';
      node.setAttribute( i, attr[i] );
    return node;
  }
   
   
  var css = "position:fixed; left:0; bottom:0; border:0; " +
var iframe = document.createElement('iframe');
    "margin:0; padding:0; overflowY:auto; overflowX:hidden";
iframe.setAttribute('style', css);
   
   
  var doc = document;
// The about:blank page becomes a blank(!) canvas to modify
  var iframe = tag( "iframe", { style:css, src:"about:blank" } );
iframe.setAttribute('src', 'about:blank');
  doc.body.appendChild( iframe );
  var win = unsafeWindow.frames[unsafeWindow.frames.length-1];
document.body.appendChild(iframe);
  doc = win.document;
  /* add things to doc.body */
var iframeWindow = unsafeWindow.frames[unsafeWindow.frames.length-1];
  iframe.style.height = (16 + doc.body.offsetHeight) + "px";
  iframe.style.width = (16 + doc.body.offsetWidth) + "px";
// The timeout ensures this code is not run until Firefox has created the new DOM
setTimeout(function() {
    var doc = iframeWindow.document;
    doc.body.style.background = 'red';
    doc.body.innerHTML = 'Test.';
}, 0);

Revision as of 05:55, 3 June 2007

Any HTML you inject into a site is subject to the CSS rules of that site. For many modifications, this is what you want: the elements you inject will fit in nicely. But if you inject something – perhaps a configuration panel – that should look the same across an entire site where styles can vary wildly (e.g. MySpace, eBay) or across multiple sites, you may find that you want it exempt from the site CSS.

The solution is to add your code inside an iframe. This is a bit tricky. Example code:

// position:fixed means it scrolls along with the page. The z-index is necessary on sites
// like Wikipedia and GreaseSpot. The border is just a border. The rest of the CSS centers 
// the iframe horizontally and vertically.
var css = 'position:fixed; top:50%; left:50%; width:30em; height:20em; margin-left:-15em;' + 
          'margin-top:-10em; border:1px solid #000; z-index:9999';

var iframe = document.createElement('iframe');
iframe.setAttribute('style', css);

// The about:blank page becomes a blank(!) canvas to modify
iframe.setAttribute('src', 'about:blank');

document.body.appendChild(iframe);

var iframeWindow = unsafeWindow.frames[unsafeWindow.frames.length-1];

// The timeout ensures this code is not run until Firefox has created the new DOM
setTimeout(function() {

    var doc = iframeWindow.document;
    doc.body.style.background = 'red';
    doc.body.innerHTML = 'Test.';

}, 0);