tags:

views:

1166

answers:

8

I open gmail, click on an inbox item, and look at source of the page. It doesn't look like there isn't any proper html to relate to what is shown on the actual page.

How is the source getting processed into the actual page? Is there some javascript processing this information?

A: 

In IE you get a blank page if you right-click and "View Source". If you use the Page menu > View Source, you see the actual page source. As Steve mentioned, in Firefox you see the actual source both from right-click "View Page Source" and from View menu > Page Source.

I suspect they're taking advantage of some IE-specific obfuscation to hide their secret sauce from 85% of the users.

GalacticCowboy
"I suspect they're taking advantage of some IE-specific obfuscation to hide their secret sauce from 85% of the users." I suspect it's actually using an iframe or something of that nature, even if just isolating that to IE.
eyelidlessness
IE doesn't intelligently deal with frames when viewing source. If you're on a page with frames and view source from IE, it will only display one of the frame's worth of content.
Jay
+3  A: 

GMail uses a large amount of java script to make its pages work. This javascript is manipulating the HTML DOM.

If you look at the page source you aren't seeing the current contents of the DOM. You need to use a tool that will show you the HTML DOM. I use Opera Dragonfly, but there are plenty of others for other browsers. Dragonfly will show the the scripts for the page, as well as the event handlers for each element of the DOM.

Edited 3 Nov 08:

In response to the request for access to the scripts, when I view the page the scripts all come up as inline. As others have said, they're obfuscated, so less than easy to read. Here is just a sample:

try{function aa(a,b){return a.appendChild=b}function ba(a,b){return a.textContent=b}function da(a,b){return a.stop=b}function ea(a,b){return a.toString=b}function fa(a,b){return a.length=b}function ga(a,b){return a.title=b}function ha(a,b){return a.position=b}function ia(a,b){return a.create=b}function ja(a,b){return a.className=b}function ka(a,b){return a.width=b}function la(a,b){return a.expand=b}function ma(a,b){return a.abort=b}function na(a,b){return a.data=b}function oa(a,b){return a.next=b}
function pa(a,b){return a.load=b}function d(a,b){return a.innerHTML=b}function qa(a,b){return a.onerror=b}function sa(a,b){return a.getDate=b}function ta(a,b){return a.value=b}function ua(a,b){return a.disabled=b}function va(a,b){return a.dispatchEvent=b}function wa(a,b){return a.currentTarget=b}function xa(a,b){return a.left=b}function ya(a,b){return a.hideFocus=b}function za(a,b){return a.removeChild=b}function Aa(a,b){return a.target=b}function Ba(a,b){return a.screenX=b}
function Ca(a,b){return a.screenY=b}function Da(a,b){return a.send=b}function Ea(a,b){return a.remove=b}function Fa(a,b){return a.start=b}function Ga(a,b){return a.cssText=b}function Ha(a,b){return a.keyCode=b}function Ia(a,b){return a.enabled=b}function Ja(a,b){return a.href=b}function Ka(a,b){return a.handleEvent=b}function La(a,b){return a.removeNode=b}function Ma(a,b){return a.detach=b}function Na(a,b){return a.type=b}function Oa(a,b){return a.contains=b}function Pa(a,b){return a.tabIndex=b}
function Qa(a,b){return a.cellSpacing=b}function Ra(a,b){return a.clear=b}function Sa(a,b){return a.setPosition=b}function Ta(a,b){return a.cellPadding=b}function Ua(a,b){return a.display=b}function Va(a,b){return a.execute=b}function Wa(a,b){return a.height=b}function Xa(a,b){return a.nodeValue=b}function Ya(a,b){return a.clientX=b}function Za(a,b){return a.clientY=b}function ab(a,b){return a.right=b}function bb(a,b){return a.visibility=b}
function aaa(a){var b=cb[i](db);(new Image).src=baa+eb(b)+"&jsmsg="+eb(a)+caa+fb+daa+(new Date)[gb]()}function _B_record(){cb[k]((new Date)[gb]())}function _B_prog(a){top.pr=a;if(hb===undefined){var b=top[ib][jb](eaa);hb=b?b[m]:null}if(hb){ka(hb,n[kb](a*0.99)+lb);if(a==100)hb=null}}function _B_err(a){aaa(a);throw a;}function mb(a,b){var c=a[nb](ob),e=b||pb;for(var f;f=c[rb]();)if(e[f])e=e[f];else return null;return e}function sb(){}function tb(a){a.lg=function $(){return a.bmc||(a.bmc=new a)}}
function ub(a){var b=typeof a;if(b==vb)if(a){if(typeof a[o]==wb&&typeof a[xb]!="undefined"&&!faa(a,gaa))return yb;if(typeof a[q]!="undefined")return zb}else return Ab;else if(b==zb&&typeof a[q]=="undefined")return vb;return b}function haa(a,b){if(b in a)for(var c in a)if(c==b&&Bb[r][Cb][q](a,b))return true;return false}function Db(a){return typeof a!="undefined"}function Eb(a){return ub(a)==yb}function Fb(a){var b=ub(a);return b==yb||b==vb&&typeof a[o]==wb}function Gb(a){return typeof a==Hb}
function Ib(a){return typeof a==wb}function Jb(a){return ub(a)==zb}function Kb(a){var b=ub(a);return b==vb||b==yb||b==zb}function Lb(a){if(a[Cb]&&a[Cb](iaa)){var b=a.closure_hashCode_;if(b)return b}a.closure_hashCode_||(a.closure_hashCode_=++jaa);return a.closure_hashCode_}
function s(a,b){var c=a.SSb;if(arguments[o]>2){var e=Array[r][Mb][q](arguments,2);c&&e[Nb][Ob](e,c);c=e}b=a.WSb||b;a=a.TSb||a;var f,g=b||pb;f=c?function(){var h=Array[r][Mb][q](arguments);h[Nb][Ob](h,c);return a[Ob](g,h)}:function(){return a[Ob](g,arguments)};f.SSb=c;f.WSb=b;f.TSb=a;return f}function Pb(a){var b=Array[r][Mb][q](arguments,1);b[Nb](a,null);return s[Ob](null,b)}function Qb(a,b){for(var c in b)a[c]=b[c]}
function t(a,b){function c(){}c.prototype=b[r];a.F=b[r];a.prototype=new c;a[r].constructor=a}function Rb(a,b,c){if(a[Sb])return a[Sb](b,c);if(Array[Sb])return Array[Sb](a,b,c);var e=c==null?0:c<0?n.max(0,a[o]+c):c;for(var f=e;f<a[o];f++)if(f in a&&a[f]===b)return f;return-1}function Tb(a,b,c){if(a[Ub])a[Ub](b,c);else if(Array[Ub])Array[Ub](a,b,c);else{var e=a[o],f=Gb(a)?a[nb](v):a;for(var g=0;g<e;g++)g in f&&b[q](c,f[g],g,a)}}
function Vb(a,b,c){if(a.map)return a.map(b,c);if(Array.map)return Array.map(a,b,c);var e=a[o],f=[],g=0,h=Gb(a)?a[nb](v):a;for(var j=0;j<e;j++)if(j in h)f[g++]=b[q](c,h[j],j,a);return f}function Wb(a,b,c){if(a[Xb])return a[Xb](b,c);if(Array[Xb])return Array[Xb](a,b,c);var e=a[o],f=Gb(a)?a[nb](v):a;for(var g=0;g<e;g++)if(g in f&&b[q](c,f[g],g,a))return true;return false}
Richard A
As much as I understand the good intention, I reckon care should be taken when editing other people's questions and answers. The edit done to mine didn't correct all the typos. The edit to the question has recast it and removed some of its content.
Richard A
+1  A: 

When you do plain "View Source," you're looking at the source of the loading page. All the HTML there is dynamically replaced with the GMail app when it's all loaded.

EDIT: GMail also makes extensive use of iframes for God-only-knows what. If I remember correctly, there're about 5 or 6 (i)frame objects in GMail. Additionally, much of the Javascript is loaded dynamically, without even using tags. The URL for these scripts goes something like:

https://mail.google.com/mail/?ui=2&amp;view=jsm&amp;name=gm&amp;ver=A7pcfYmUnLY&amp;am=X_E5t8T3EkGpRf3deGMWZA

That exact URL won't work, though; the two variables at the end depend on your individual login information/session/phase of the moon.

Jarett
A: 

To view the Javascript used to generate the email, use Firebug for firefox, click "script", then in the bar above that button there will be the name of one of the scripts, click on it to list all the scripts, choose whichever one you like. gmail probably compresses it though, making it pretty much unreadable.

Dean
+1  A: 

Yes, they are using javascript to transform that data into the complete page that you see.

Carl89
+4  A: 

As Jay mentioned, my method of using FireFox's Web Developer Plugin doesn't actually work, it just shows the preview (first few lines).

However, using Firefox's FireBug plugin, you can click Inspect, then move the mouse and highlight what your interested in. When it has the outline around it click. Once the selection is shown in the HTML of FireBug, right-click on the HTML element (in my case a div class="YrSjGe"), and choose Copy HTML. Then go to your favorite text editor, and paste.

Finally, the HTML :)

Dean
+1  A: 

As others have already mentioned, Gmail uses large portions of obfuscated Javascript to manipulate the DOM. Although it is a lot of work to discover how all of this works (since it's a lot of obfuscated code to go through), the best way to finding out how it works is to use Firebug to look at the various AJAX-requests, included scripts and the rendered DOM.

Also, you could read the following article, which explains a short portion of the architecture used by Gmail.

Aron Rotteveel
A: 

You can also select 'Show original' on the drop down where it says 'reply' or 'reply to all' to see the exact email text including headers.

Adam Nelson