Открываю gmail, нажимаю на элемент входящей почты и смотрю на источник страницы. Не похоже, чтобы какой-либо правильный html не был связан с тем, что показано на фактической странице.Как преобразуется источник gmail?
Как источник обрабатывается на фактической странице? Есть ли какая-нибудь обработка javascript этой информации?
В IE вы получаете пустую страницу, если вы щелкните правой кнопкой мыши и «Просмотрите источник». Если вы используете меню «Страница»> «Просмотр источника», вы видите фактический источник страницы. Как сказал Стив, в Firefox вы видите фактический источник как из правого клика «View Page Source», так и из меню «Вид»> «Источник страницы».
Я подозреваю, что они воспользовались некоторой иллюминацией, связанной с IE, чтобы скрыть свой секретный соус от 85% пользователей.
«Я подозреваю, что они используют некоторую определенную IE-специфическую обфускацию, чтобы скрыть свой секретный соус от 85% пользователей». Я подозреваю, что на самом деле он использует iframe или что-то в этом роде, даже если просто изолировать его от IE. – eyelidlessness 2008-10-31 01:24:42
IE не имеет разумного отношения к кадрам при просмотре источника. Если вы находитесь на странице с фреймами и просматриваете исходный код из IE, он отображает только один из них. – Jay 2008-10-31 04:38:42
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}
Когда вы делаете простой «Просмотр источника», вы смотрите на источник страницы загрузки. Весь HTML-код динамически заменяется приложением GMail, когда он загружен.
EDIT: GMail также широко использует фреймы для God-only-знает что. Если я правильно помню, в GMail есть около 5 или 6 (i) объектов фрейма. Кроме того, большая часть Javascript загружается динамически, даже не используя теги. URL для этих сценариев выходит что-то вроде:
https://mail.google.com/mail/?ui=2&view=jsm&name=gm&ver=A7pcfYmUnLY&am=X_E5t8T3EkGpRf3deGMWZA
Это точный URL не будет работать, хотя; две переменные в конце зависят от вашей индивидуальной информации/сеанса/фазы луны.
Для просмотра Javascript, используемого для генерации сообщения электронной почты, используйте Firebug для firefox, нажмите «script», затем в панели над этой кнопкой появится имя одного из скриптов, щелкните по нему, чтобы перечислить все сценарии, выберите тот, который вам нравится. gmail, вероятно, сжимает его, делая его довольно нечитаемым.
Да, они используют javascript для преобразования этих данных в полную страницу, которую вы видите.
Как упоминалось Jay, мой метод использования плагина для веб-разработчиков FireFox на самом деле не работает, он просто показывает предварительный просмотр (первые несколько строк).
Однако, используя Firebug плагин Firefox, вы можете нажать Проверить, затем переместите мышь и выделить то, что ваш интерес в. Когда он имеет контур вокруг него нажмите.После выбора отображается в HTML в FireBug, правой кнопкой мыши на элементе HTML (в моем случае DIV класс = «YrSjGe»), и выберите Скопировать HTML. Затем перейдите в свой любимый текстовый редактор, и вставьте.
Наконец, HTML :)
Как уже уже упоминался, Gmail использует большую часть запутанного Javascript для манипулирования DOM. Хотя очень много работы, чтобы узнать, как все это работает (так как это много запутанного кода, чтобы пройти), лучший способ узнать, как он работает, - использовать Firebug, чтобы посмотреть на различные запросы AJAX, включая скриптов и рендеринга DOM.
Кроме того, вы можете прочитать following article, объясняющий короткую часть архитектуры, используемой в Gmail.
Вы можете также выбрать «Показать оригинал» на ниспадающем где он говорит: «ответ» или «ответить всем», чтобы увидеть точный текст сообщения электронной почты, включая заголовки.
Этот вопрос был изменен, чтобы удалить часть его исходного контента. Такие изменения, особенно по вопросам людей, чей первый язык не является английским, могут удалить некоторые важные детали из того, что они спрашивали. – 2008-10-31 03:29:22