Transparent iframes

Firefox by default makes all iframes transparent (no effort required from the developer) if you don't define the background css property.

IE requires extra effort to ensure that the hosting page as well as the iframe's content owner both wanted this iframe to be transparent (few may agree with IE's approach while most will condemn M$). Whatever, here is the css (for page loaded in the iframe) and iframe tag declaration that works flawlessly:

body{
    background: transparent;
}

Bypassing browser history

Ahh, this was interesting thing@work. We've an iframe that opens within a website and its location keeps changing with user interactions. The problem was with all these new urls going into browser's history and interference with the default browser back/forward navigation (back/forward navigation gets enabled for the iframe instead).

Initially i thought it wasn't possible to control this (history object doesn't support it, i knew). But then came this simple thing i used in my first year while experimenting in one of my first few projects.

location.replace(newurl);

Ahh, what a savior. Works well in all the browsers. Here are the details from mozilla on this.

intercepting javascript errors from live system

Ever wondered how to intercept javascript errors (that happen on client side browsers) for your live system? Yep, i know! Despite all the efforts, a visitor might encounter an issue in his "foobar" browser that you just couldn't test before you went live. So how to do it? This little guy is the savior:

window.onerror = function(errorMessage, url, line) {
}

I just stumbled upon this blogpost by xing developer Christopher; who summarizes how they do it in xing. Pretty interesting and clever stuff, here is the code:

window.onerror = function(errorMessage, url, line) {
  var loggerUrl = "https://www.xing.com/js/logger";
  var parameters = "?description=" + escape(errorMessage)
      + "&url=" + escape(url)
      + "&line=" + escape(line)
      + "&parent_url=" + escape(document.location.href)
      + "&user_agent=" + escape(navigator.userAgent);
 
  /** Send error to server */
  new Image().src = loggerUrl + parameters;
};

For details read the original post here.