Николай Сиварев "Приручая сайты"
•
0 likes•384 views
Николай Сиварев "Приручая сайты" Я.Субботник в Новосибирске О докладе: В Метрике есть карта кликов, карта ссылок, плеер Вебвизора – всё это веб-приложения, которые поверх произвольной страницы в интернете показывают какие-то данные. Рассказ пойдет о нескольких подходах к созданию таких приложений, достоинствах и недостатках каждого подхода.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Николай Сиварев "Приручая сайты"
Similar to Николай Сиварев "Приручая сайты" (20)
More from Yandex
More from Yandex (20)
Николай Сиварев "Приручая сайты"
- 1. Приручая сайты Николай Сиварев Разработчик интерфейсов Я.Субботник, Новосибирск, 19 ноября 2011 года
- 2. Формулировка задачи • Есть произвольная страница в интернете • Необходимо на ней что-‐то показать 2
- 3. Вебвизор 3
- 5. Терминология • Страница, на которой показываем данные — страница-‐жертва. • Наш скрипт, подключаемый на страницу-‐жертву — вирус. 5
- 6. 6
- 7. Подгрузка скрипта Как задетектить режим приложения? • Признак в GET параметрах • Признак внутри #hash • Признак в window.name 7
- 8. Подгрузка скрипта Как задать window.name? window.open('hhp://site.ru/', 'MyName'); <a href='hhp://site.ru/' target='MyName'>link</a> <iframe src='hhp://site.ru/' name='MyName'></iframe> 8
- 9. Подгрузка скрипта Какой скрипт грузить? • Несколько приложений • Несколько локалей • Загрузка dev-‐версии 9
- 10. Подгрузка скрипта Указание пути к скрипту • В GET параметрах • В #hash • В window.name Обязательно проверить на корректность! 10
- 11. Подгрузка скрипта var s = document.createElement('script'); s.type = 'text/javascript'; s.src = scriptUrl; var head = document.getElementsByTagName('head')[0]; head.insertBefore(s, head.firstChild); 11
- 12. 12
- 13. Проблемы • Общее пространство JavaScript • Общий CSS • Общий DOM 13
- 14. Подгрузка скрипта var s = document.createElement('script'); s.type = 'text/javascript'; s.src = scriptUrl; var head = document.getElementsByTagName('head')[0]; head.insertBefore(s, head.firstChild); 14
- 15. Создаём iframe var div = document.createElement('div'); div.innerHTML = '<iframe name="MyName" allowtransparency="true" frameborder="0"></ iframe>'; var iframe = div.firstChild; document.body.appendChild(iframe); 15
- 16. Подключаем скрипт в iframe var iframeDoc = iframe.contentWindow.document; iframeDoc.open(); iframeDoc.write('<!doctype html>'); iframeDoc.write('<html><head>'); iframeDoc.write('<meta http-equiv="X-UA- Compatible" content="IE=EmulateIE7" />'); 16
- 17. Подключаем скрипт в iframe iframeDoc.write('</head><body>'); iframeDoc.write('<script src="' + scriptPath + '"></script>'); iframeDoc.write('</body></html>'); iframeDoc.close(); 17
- 18. 18
- 19. Достоинства • Полностью изолированный JavaScript • Частично изолированный CSS • Частично изолированный DOM 19
- 20. Недостатки • CSS всё ещё частично общий • DOM всё ещё частично общий • Интерфейс в ифрейме ограничен рамками ифрейма 20
- 21. 21
- 22. Достоинства • Полностью изолированы и JavaScript, и CSS, и DOM. Бонус • Сайт превратился в скриншот 22
- 23. Ещё проблемы Общение с родным сервером • JSONP • Кроссдоменный XMLHhpRequest Плохо? 23
- 24. Ещё проблемы • Невозможно контролировать процесс загрузки приложения 24
- 25. Ещё проблемы • Невозможно перезагрузить исследуемую страницу без перезагрузки интерфейса 25
- 26. 26
- 27. 27
- 28. Кроссдоменное общение targetWin.postMessage('message', '*'); window.onmessage = function(message) { // ... }; postMessage в IE синхронна! 28
- 29. … но • Страница, выпрыгивающая из фрейма, выпрыгнет из нашего приложения. • IE не младше 8-‐й версии 29
- 30. Резюме Идеального варианта нет! 30
- 31. Николай Сиварев Разработчик интерфейсов sivarev@yandex-‐team.ru