Знаете ли вы, что
вы можете использовать iFrames в приложениях WinRT, разработанных с использованием JavaScript? Это должно быть захватывающим? Почему тебя это волнует? За ответами следуйте, пока я отправляюсь в путешествие открытий, пытаясь добавить живые каналы Twitter в свое приложение.
Чтобы подготовить почву для того, что я хочу сделать, вы должны сначала понять, что такое виджет Twitter . Ребята из Twitter упростили веб-разработчикам создание настраиваемого динамического раздела веб-сайта для отображения твитов на основе пользователя , поиска , избранного или списка . После того, как я знаю свои критерии твита, я могу настроить внешний вид, размеры и другие соответствующие параметры. Когда я закончу со всеми своими настройками, я смогу взять код, который сделает волшебство на моем веб-сайте. Хм … но я хочу это в моем приложении WinRT. Это будет работать? Давай выясним.
Я выберу создание виджета для поиска в Twitter . Вот скриншот моих критериев:
Как только я нажимаю кнопку [Готово и захватить код], я вижу следующее:
Теперь я добавлю этот код в свой проект в Visual Studio 2012 . Я только что создал этот проект, используя пустой шаблон . В файл default.html я добавлю код виджета Twitter, который я создал выше. Вот как выглядит моя разметка:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HowTo_IFrames</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- HowTo_IFrames references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'search', search: '#win8appdev', interval: 30000, title: 'Windows 8 Developers', subject: '#win8appdev', width: 250, height: 300, theme: { shell: { background: '#8ec1da', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: false, loop: true, live: true, behavior: 'default' } }).render().start(); </script> </body> </html>
Будет ли это так просто? К сожалению нет. Когда я пытаюсь запустить приложение, я получаю следующую ошибку:
В сообщении об ошибке может быть неочевидно, в чем заключается настоящая проблема. Причина, по которой ‘TWTR’ не определена, заключается в том, что следующий скрипт не выполняется:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
Почему сценарий не выполняется? Потому что моя страница default.html считается локальной в контексте моего приложения. Единственный способ разрешить выполнение внешнего скрипта — это если он был выполнен в веб- контексте. Ну, кто решил эти правила ? Возможно, лучший вопрос сейчас — Как я узнаю, нахожусь ли я в локальном контексте или в веб-контексте?
Любой HTML-файл, который физически является частью проекта, считается локальным в контексте. Обратным к этому является любой HTML-код, который находится снаружи или удален от проекта и считается находящимся в веб-контексте. Как я могу выполнить HTML удаленно в моем приложении WinRT?
Использование iFrames
Я могу использовать iframe в своем HTML для указания на внешнюю веб-страницу. Для демонстрации я удалю сценарий, который я добавил на свою страницу default.html (мы вернемся к этому коду позже), и заменю содержимое тега body следующим:
<h1>iFrame Demo</h1> <iframe src="http://www.palermo4.com" width="900" height="600"> </iframe>
Когда я запускаю свое приложение сейчас, я вижу следующее:
Если это все, что я делаю, у меня по сути есть «браузер» для моего сайта в моем приложении. Я также мог бы изменить источник iFrame из тегов привязки, как показано со следующими ревизиями:
<h1>iFrame Demo</h1> <div> <a href="http://palermo4.com" target="framed">Palermo4</a> <a href="http://codefoster.com" target="framed">Codefoster</a> </div> <iframe name="framed" width="900" height="600"> </iframe>
Это приведет к тому, что iFrame загрузит соответствующее значение href после щелчка любого из тегов привязки.
Рекомендуется: создать файл HTML в корневом каталоге вашего проекта с именем
msapp-error.html . Этот файл будет автоматически загружен в iframe при возникновении ошибок из-за того, что исходные ресурсы не загружаются или не обнаруживаются!
Возвращаясь к своей первоначальной цели, я хотел бы, чтобы код, который я взял из Twitter, работал в моем приложении. У меня есть мысль! Я возьму код виджета Twitter и вставлю новый HTML-файл в свой проект. Я назову файл twitterframe.html и создам его в корневом каталоге проекта. Вот содержимое этого файла:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"> </script> <script> new TWTR.Widget({ version: 2, type: 'search', search: '#win8appdev', interval: 30000, title: 'Windows 8 Developers', subject: '#win8appdev', width: 250, height: 300, theme: { shell: { background: '#8ec1da', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#1985b5' } }, features: { scrollbar: false, loop: true, live: true, behavior: 'default' } }).render().start(); </script> </body> </html>
Теперь я вернусь к default.html и изменим содержимое тегов body следующим образом:
<h1>iFrame Demo</h1> <iframe src="/twitterframe.html" width="300" height="400"> </iframe>
Получу ли я желаемый результат? Могу ли я обмануть iframe для запуска страницы в локальном контексте, но обработать ее, как в веб-контексте? Не так, как я это делаю. Когда я запускаю свое приложение, я получаю ту же ошибку, что и ранее. Тем не менее, я был на правильном пути мышления. Используя специальный псевдоним перед URL, я могу попросить выполнить локальную страницу в веб-контексте. Вот синтаксис для этого:
<iframe src="ms-appx-web:///twitterframe.html" width="300" height="400"> </iframe>
Добавляя ms-appx-web: /// перед именем локальной страницы, я информирую мое приложение о запуске его в веб-контексте. Этот важный шаг дает мне именно то, что я хочу, как показано здесь:
Ура! Мой виджет поиска в Твиттере работает в моем приложении WinRT! Подумайте о возможностях любых других сайтов социальных сетей или картографических инструментов!
Кстати, вы можете управлять тем, что разрешено в iFrame, установив атрибут песочницы . IntelliSense раскрывает возможности самоописания:
Надеюсь, вам понравится разрабатывать приложения для Windows 8 с JavaScript и HTML5! Чтобы получить больше ресурсов, обязательно подпишитесь на Generation App! Твоя идея. Ваше приложение 30 дней .
Ура!