Adam.Kahtava.com / AdamDotCom » Firebug

Inter / Cross Browser Window Communication Using JavaScript

Adam Kahtava — Tue, 11 Mar 2008 15:45:20 +0000

A quick search on the internet for “Inter Browser Window Communication Using JavaScript” reveals many outdated search results recommending questionable techniques. In the past I’ve fallen prey to many of these ill-advised suggestions. So… I thought, I’d start a small series on JavaScript techniques that I’ve found useful.

This post covers Inter / Cross Browser Window Communications using JavaScript.

A common scenario in web applications is: to have Page A open Page B , then have Page A communicate with Page B or vise versa.

One of the techniques floating around the internet suggests that you use Cookies and a JavaScript setTimeout function that listens for the presence of a cookie. So essentially Page A sets a cookie and Page B listens for this cookie and acts on it.

A alternate solution might be to use the JavaScript Browser window.open and window.opener methods. Using these two methods we can achieve inter / cross browser window communication as long as the Same Origin Policy is withheld - a similar approach can be taken for frame and iframe communication.

An example:

// myNewWindow stores the reference to the newly 
//   created window, this provides a handle for defining 
//   and calling methods in the New Window 
var myNewWindow = window.open('about:blank');

// Let us call the alert method in our New Window 
//   from this window (the Original Window) 
myNewWindow.alert('Hello From Original Window');

// Let us call an alert method in our Original Window 
//   from our New Window. So.. Lets use a timer 
myNewWindow.setTimeout(
 'window.opener.alert(\'Hello From The New Window\')', 100);

Click here to run this code live in your browser window using a Bookmarklet, or copy the above code into your Firebug Command Line Console.

My first Greasemonkey Script: Goodbye ASP.NET Forum Ads

Adam Kahtava — Thu, 22 Nov 2007 03:12:58 +0000

Greasemonkey is an add-on for Firefox. Through JavaScript it allows anyone the ability to dynamically modify a page as, or after it’s being rendered in the browser. This lets anyone trim the DOM, remove ads, and modify page in anyway they see fit (it also opens up some serious privacy concerns with XSS). Anyhow, I spend a fair time on the ASP.NET forums, but the advertisements have always made for a somewhat negative, but tolerable user experience.

Today I finally broke down and wrote my own Greasemonkey script - now formally known as “The ASP.NET Forums Beautifier” for lack of a better name.

The Script Before and After:

Before - usually the ASP.NET Forums look like this:

After - with my script running in Greasemonkey we get this:

note: the greasemonkey icon, and complete lack of fluff / advertisements on the second screenshot.

Creating this script was simpler than I expected. It was a matter of skimming through an article on How to write Greasemonkey scripts, using Firebug’s JavaScript Console and Firefox’s Error Console to test my code (after all, Firefox is the new IDE, Firefox as an IDE), and an hour later, Viola! No more ads.

The YUI blog and Douglas Crockford in particular, have inspired my JavaScript renaissance. JavaScript is really interesting, it’s a functional, loosely typed programming language that uses prototype-base inheritance. Developing in JavaScript is a real treat from some of the more statically typed languages.

Download Greasemonkey and “The ASP.NET Forums Beautifier” for yourself. :)

JavaScript is awesome: I want to work with Douglas Crockford!

Adam Kahtava — Sun, 16 Sep 2007 20:25:10 +0000

Watch these amazing videos on JavaScript by Douglas Crockford (a senior JavaScript Architect at Yahoo!). I wish I could program in JavaScript all day.

Links to Crockford's great JavaScript videos:

You might want to download YSlow for Firebug while your at it too… :)

In Favor of Using Style Elements / Embedded Style Sheets / Style Blocks / Style Tags or Whatever You Want To Call Them inside the HTML / XHTML Body.

Adam Kahtava — Tue, 20 Mar 2007 22:20:02 +0000

I’ve been using Style Elements within the HTML Body tag to work around some of the design flaws presented in ASP.NET 2.0 Themes - see the second solution in this post for more details. I’ve been leary of using this method because it’s not a best practice, since it compromises the validity of the HTML / XHTML document. I decided to do a little more research on this subject and made the following discoveries.

Discoveries:

Some of the more complex web sites (Amazon and Yahoo!) make use of Style Elements within the Body Element - see the source snippets below.
Gecko (Firefox, Flock, Mozilla, etc…) based browsers automatically move Style Elements found within the Body Element into the Head Element and render the page as expected - see the rendered Document Object Model (DOM) image below.
Internet Explorer doesn’t move the Style Element into the Head Element, but renders the page as expected.
Opera… well I wish I knew what Opera did, but the page renders as expected.

Source snippet from Amazon:

table>
td>
tr>
table>

<div id=”listoflists_data” style=”display:none”>
Note how the Style element is located between the

and

tags.

Source snippet from Yahoo!:

<h4>
<a id=”paweather” class=”details” href=”r/wb/*-http://weather.yahoo.com/forecast/USKS0448_f.html”><span class=”icon”>Weather <b><strong>51°strong>Fb>span>a>

<style type=”text/css”>#patabs #weather .icon{background:url(http://us.i1.yimg.com/us.yimg.com/i/us/we/31/b/26.gif) 3px 2pxno-repeat;}style>

h4>
Note how the Style element is located within the

tag.

A snapshot of the Document Object Model (DOM) as seen through Firebug:

Note the highlighted area references the Yahoo! source snippet from above.�
Conclusion: Although the Style Element within the Body Element compromises the validity of a document, some of the leaders in web design and accessibility use this approach, so it may not be as big a work around or hack.

Now supporting Opera 9 and other Web Development (CSS) Related Notes

Adam Kahtava — Sat, 09 Dec 2006 19:00:07 +0000

I noticed that a couple visitors were using the Opera web browser, so I decided to check my site with this highly W3C CSS compliant browser - see the “Acid2 Test”.

To my horror, I found my CSS wasn’t working properly.

My blog in Opera (the CSS rendering issue):

I began debugging my site by starting up Firefox with the Firebug extension. Upon inspecting my Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).

Using the Firebug extension for Firefox to view the DOM and related errors:

My error; I had erroneously entered / instead of / for my CSS comment. After making the changes everything rendered as expected in Opera.

Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc… and then make the respective changes for proper display in IE. Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.

Other useful Firefox extensions:

Colorzilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

del.icio.us - Keep, share and discover all your favorite things.

FasterFox - Performance and network tweaks for Firefox.

FireBug - Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Greasemonkey - Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).

Mouse Gestures - Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

Other useful Internet Explorer extensions / toolbars:

Internet Explorer Developer Toolbar Beta 3 - Tools for quickly creating, understanding, and troubleshooting Web pages