Использование JavaScript для написания iframe для виджета - лучшие практики / ограничения? - PullRequest
Новая
       3

Использование JavaScript для написания iframe для виджета - лучшие практики / ограничения?

4 голосов
/ 02 июля 2011

Я нахожусь в процессе разработки своего рода стороннего виджета (видеоплеер HTML5 / js), предназначенного для беспроблемного встраивания в сторонние сайты, который работает в сочетании с Flash-плеером (HTML5/ js player в этом случае является запасным вариантом).

Чтобы разрешить внешнее внедрение через один шлюз, мы предлагаем код для встраивания, который выглядит примерно так:

<script src="http://example.com/embed.php?id=12345678&width=400&height=300"></script>

Обратите внимание на расширение .php.Этот сценарий выполняет некоторое базовое обнаружение агента браузера, запускает небольшую логику бэкэнда, основанную, главным образом, на строке запроса 'id', а затем выводит javascript, который document.write на страницу, представляет собой фактический код встраивания.

Если это устройство с поддержкой Flash, код document.write - это прямой код <object> Flash для встраивания (без iframe; прямо на их страницу);если это устройство iOS, оно записывает <iframe>, src которого указывает на HTML-документ, который является проигрывателем HTML5 / javascript - со своими собственными .js в <head>, наборе <div> s в теле, которые составляют проигрыватель HTML5 / js и т. Д.

Я уверен, что это можно исправить / сделать лучше.Итак, мои вопросы:

  1. Какие шаги, если таковые имеются, могут или должны быть удалены?

  2. Это хорошая идея, чтобы начать сперенести версию HTML5 / js в iframe, а не записать все это прямо на страницу?Как насчет внешнего .js, который нужен, который мы используем в <head>?Кроме того, в будущем нам, вероятно, понадобится двусторонняя связь с нашим сайтом (тот же домен, что и в iframe src), поэтому iframe предлагает хороший способ разрешить это, правильно?

  3. Есть ли какие-то проблемы с областью, о которых мне нужно беспокоиться, если они загружены в iframe (например, версия jQuery нашего игрока конфликтует с тем, что находится на сторонней родительской странице)?

  4. Есть ли что-нибудь, что я могу / должен сделать для обеспечения правильного порядка загрузки, чтобы я не оказывал негативного влияния на сторонний сайт во время загрузки / выполнения нашего скрипта?

  5. Есть лилучше / умнее, чем использовать document.write для записи окончательного кода встраивания на стороннюю страницу (будь то код Flash <object> или HTML5 / js <iframe>)?Должен ли я писать этот код в div, который мы включили в исходную строку js, или это безопасно просто документировать. Записать его в любой контейнер, в котором он находится?

Спасибо!Проблемы с областью действия Javascript и асинхронное поведение никогда не были моей сильной стороной ...

Ответы [ 2 ]

2 голосов
/ 02 июля 2011

2,3) Если используется iframe, в этот iframe должна быть загружена отдельная библиотека jQuery.Это может быть достаточно веской причиной для использования iframe (предотвратить проблемы с версией).В некоторых случаях это приводит к ненужной загрузке jQuery дважды.

5) document.write всегда следует избегать по причинам, указанным unclenorton.Тем не менее, было бы неплохо разрешить пользователю встраивать его без необходимости вызова JS.Подход, который нужно рассмотреть, заключается в передаче идентификатора элемента, в который он хочет поместить игрока, в тег сценария.

Что-то вроде: <div id='my-video'></div> <script src="http://example.com/embed.php?id=12345678&width=400&height=300&nodeId=my-video"></script>

Тогда ваш сценарий можетподключитесь к событию DOMReady / onload и создайте HTML без document.write, используя 

// This should be called from an onload handler
document.getElementById('<?= $_GET['nodeId']?>').innerHTML = myHtmlString;

или с помощью скучных createElement appendChild вызовов

1 голос
/ 02 июля 2011

5) Да.Использование document.write является плохой практикой в ​​целом.Он задерживает загрузку DOM и не позволяет вашему браузеру делать что-либо еще до его завершения.

Вместо этого подумайте о выборе объекта-оболочки (используя getElementById или выбор jQuery) и установке его innerHTML (или jQueryhtml) свойство вашего предварительно собранного кода для встраивания.

...