Статьи

Как использовать iFrames в приложениях WinRT

Ноябрь 3, 2018

Знаете ли вы, что
SNAGHTML25abaef5вы можете использовать iFrames в приложениях WinRT, разработанных с использованием JavaScript? Это должно быть захватывающим? Почему тебя это волнует? За ответами следуйте, пока я отправляюсь в путешествие открытий, пытаясь добавить живые каналы Twitter в свое приложение.

Чтобы подготовить почву для того, что я хочу сделать, вы должны сначала понять, что такое виджет Twitter . Ребята из Twitter упростили веб-разработчикам создание настраиваемого динамического раздела веб-сайта для отображения твитов на основе пользователя , поиска , избранного или списка . После того, как я знаю свои критерии твита, я могу настроить внешний вид, размеры и другие соответствующие параметры. Когда я закончу со всеми своими настройками, я смогу взять код, который сделает волшебство на моем веб-сайте. Хм … но я хочу это в моем приложении WinRT. Это будет работать? Давай выясним.

Я выберу создание виджета для поиска в Twitter . Вот скриншот моих критериев:

SNAGHTML25bbc55e

Как только я нажимаю кнопку [Готово и захватить код], я вижу следующее:

SNAGHTML25be0be3

Теперь я добавлю этот код в свой проект в 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>

Будет ли это так просто? К сожалению нет. Когда я пытаюсь запустить приложение, я получаю следующую ошибку:

SNAGHTML25cae34d

В сообщении об ошибке может быть неочевидно, в чем заключается настоящая проблема. Причина, по которой ‘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 раскрывает возможности самоописания:

SNAGHTML261ce5af

Надеюсь, вам понравится разрабатывать приложения для Windows 8 с JavaScript и HTML5! Чтобы получить больше ресурсов, обязательно подпишитесь на Generation App! Твоя идея. Ваше приложение 30 дней .

Ура!

 

 

 

39
Share: