Download as PDF, PPTX
![Подгрузка
скрипта
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = scriptUrl;
var head = document.getElementsByTagName('head')[0];
head.insertBefore(s, head.firstChild);
11](https://image.slidesharecdn.com/nsb-sivarev-120626111244-phpapp01/85/slide-11-320.jpg)
![Подгрузка
скрипта
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = scriptUrl;
var head = document.getElementsByTagName('head')[0];
head.insertBefore(s, head.firstChild);
14](https://image.slidesharecdn.com/nsb-sivarev-120626111244-phpapp01/85/slide-14-320.jpg)
Uploaded byYandex
Николай Сиварев "Приручая сайты"
Документ содержит информацию о методах подгрузки скриптов на произвольные веб-страницы, с отдельными индикациями на использование iframe и управления контентом через JavaScript. Обсуждаются достоинства и недостатки изолированных и не изолированных подходов к загрузке скриптов, а также проблемы, связанные с кроссдоменным общением и взаимодействием с оригинальным сервером. В завершении упоминается, что идеального решения для описанных задач не существует.
More Related Content
Similar to Николай Сиварев "Приручая сайты"
Николай Сиварев "Приручая сайты"
- 1. Приручая сайты Николай Сиварев Разработчик интерфейсов Я.Субботник, Новосибирск, 19 ноября 2011 года
- 2. Формулировка задачи • Есть произвольная страница в интернете • Необходимо на ней что-‐то показать 2
- 3.
- 4.
- 5. Терминология • Страница, на которой показываем данные — страница-‐жертва. • Наш скрипт, подключаемый на страницу-‐жертву — вирус. 5
- 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. Подгрузка скрипта vars = document.createElement('script'); s.type = 'text/javascript'; s.src = scriptUrl; var head = document.getElementsByTagName('head')[0]; head.insertBefore(s, head.firstChild); 11
- 12.
- 13. Проблемы • Общее пространство JavaScript • Общий CSS • Общий DOM 13
- 14. Подгрузка скрипта vars = document.createElement('script'); s.type = 'text/javascript'; s.src = scriptUrl; var head = document.getElementsByTagName('head')[0]; head.insertBefore(s, head.firstChild); 14
- 15. Создаём iframe vardiv = 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.
- 19. Достоинства • Полностью изолированный JavaScript • Частично изолированный CSS • Частично изолированный DOM 19
- 20. Недостатки • CSS всё ещё частично общий • DOM всё ещё частично общий • Интерфейс в ифрейме ограничен рамками ифрейма 20
- 21.
- 22. Достоинства • Полностью изолированы и JavaScript, и CSS, и DOM. Бонус • Сайт превратился в скриншот 22
- 23. Ещё проблемы Общение с родным сервером • JSONP • Кроссдоменный XMLHhpRequest Плохо? 23
- 24. Ещё проблемы • Невозможно контролировать процесс загрузки приложения 24
- 25. Ещё проблемы • Невозможно перезагрузить исследуемую страницу без перезагрузки интерфейса 25
- 26.
- 27.
- 28. Кроссдоменное общение targetWin.postMessage('message','*'); window.onmessage = function(message) { // ... }; postMessage в IE синхронна! 28
- 29. … но • Страница, выпрыгивающая из фрейма, выпрыгнет из нашего приложения. • IE не младше 8-‐й версии 29
- 30. Резюме Идеального варианта нет! 30
- 31. Николай Сиварев Разработчик интерфейсов sivarev@yandex-‐team.ru