Как трансформируется источник gmail? - PullRequest
3 голосов
/ 31 октября 2008

Я открываю Gmail, нажимаю на элемент папки «Входящие» и смотрю на источник страницы. Это не похоже на то, что нет никакого надлежащего html, связанного с тем, что показано на фактической странице.

Как источник обрабатывается на реальной странице? Есть ли какой-нибудь javascript, обрабатывающий эту информацию?

Ответы [ 8 ]

4 голосов
/ 31 октября 2008

Как упомянул Джей , мой метод использования плагина для веб-разработчиков FireFox на самом деле не работает, он просто показывает предварительный просмотр (первые несколько строк).

Однако, используя плагин Firefox FireBug , вы можете нажать Inspect , затем переместить мышь и выделить то, что вас интересует. это нажмите . После того, как выделение отобразится в HTML-коде FireBug, щелкните правой кнопкой мыши элемент HTML (в моем случае div class = "YrSjGe") и выберите Копировать HTML . Затем перейдите в ваш любимый текстовый редактор и вставьте .

Наконец, HTML:)

4 голосов
/ 31 октября 2008

GMail использует большое количество java-скриптов для работы своих страниц. Этот JavaScript-код манипулирует HTML DOM.

Если вы посмотрите на исходный код страницы, вы не увидите текущего содержимого DOM. Вам нужно использовать инструмент, который покажет вам HTML DOM. Я использую Opera Dragonfly, но есть множество других для других браузеров. Dragonfly покажет сценарии для страницы, а также обработчики событий для каждого элемента DOM.

Отредактировано 3 ноября 08:

В ответ на запрос о доступе к сценариям, когда я просматриваю страницу, все сценарии отображаются как встроенные. Как уже говорили другие, они запутаны, поэтому их нелегко читать. Вот только образец:

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}
1 голос
/ 31 октября 2008

Как уже упоминали другие, Gmail использует большие части обфусцированного Javascript для манипулирования DOM. Хотя предстоит выяснить, как все это работает (так как необходимо пройти через запутанный код), лучший способ выяснить, как он работает, - это использовать Firebug различные AJAX-запросы, включенные скрипты и визуализированный DOM.

Кроме того, вы можете прочитать следующую статью , в которой объясняется небольшая часть архитектуры, используемой Gmail.

1 голос
/ 31 октября 2008

Да, они используют JavaScript для преобразования этих данных в полную страницу, которую вы видите.

1 голос
/ 31 октября 2008

Когда вы делаете простой «Просмотр источника», вы смотрите на источник страницы загрузки. Весь HTML-код динамически заменяется приложением GMail при его полной загрузке.

РЕДАКТИРОВАТЬ: GMail также широко использует iframes для только Бог знает, что. Если я правильно помню, в GMail есть около 5 или 6 (i) каркасных объектов. Кроме того, большая часть Javascript загружается динамически, даже без использования тегов. URL для этих скриптов выглядит примерно так:

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

Этот точный URL не будет работать; две переменные в конце зависят от вашей индивидуальной информации для входа / сеанса / фазы луны.

0 голосов
/ 03 ноября 2009

Вы также можете выбрать «Показать оригинал» в раскрывающемся списке, где написано «Ответить» или «Ответить всем», чтобы увидеть точный текст письма, включая заголовки.

0 голосов
/ 31 октября 2008

Чтобы просмотреть Javascript, использованный для генерации электронной почты, используйте Firebug для firefox, нажмите «скрипт», затем на панели над этой кнопкой будет название одного из скриптов, нажмите на него чтобы перечислить все сценарии, выберите тот, который вам нравится. Возможно, gmail сжимает его, что делает его практически нечитаемым.

0 голосов
/ 31 октября 2008

В IE вы получите пустую страницу, если щелкнуть правой кнопкой мыши и «Просмотреть исходный код». Если вы используете меню Страница> Просмотр источника, вы увидите фактический источник страницы. Как упоминал Стив, в Firefox вы видите фактический источник как из правого клика «View Source Source», так и из меню View> Page Source.

Я подозреваю, что они используют какое-то специфическое для IE запутывание, чтобы скрыть свой секретный соус от 85% пользователей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...