Я разработал небольшой компонент, который можно поместить на любой сайт. Теперь я хочу разработать код, который мог бы продемонстрировать, как мой компонент будет выглядеть на любом веб-сайте.
Итак, человек придет на мою страницу и разместит его URL-адрес, а затем мой код должен включить мой пользовательский JS/CSS в загруженный HTML и отобразить его. Что-то вроде этого.
Здесь, как и вкладка обратной связи, я хочу показать свой компонент где угодно на этой странице.
В приведенном примере они запрашивают страницу, указанную в параметре querystring url на сервере, а затем выполняют более или менее следующие шаги:
<head> они добавляют тег <base href="url" /> к документу. Тег base сделает любые относительные ссылки в документе обработкой значения в атрибуте href в качестве своего корня. Вот как они обходят сломанные css/изображения. (Тег base поддерживается всеми браузерами)</body>) они вводят javascript, который запускает свои демонстрации.Все это довольно просто в реализации. Вы можете использовать регулярные выражения для соответствия тегам <head> и </body> для шагов 1 и 2 соответственно. В зависимости от платформы сервера, как вы на самом деле запрашиваете страницу, она будет меняться, но вот несколько ссылок, которые помогут вам начать:
Попробуйте bookmarklet.
Создайте кусок javascript, который добавит ваш код на страницу, например:
javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()
Добавьте его как href ссылки, например:
<a href="javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()">Link Text Here</a>
Сообщите своим пользователям перетащить ссылку на панель инструментов закладки и нажмите на нее на разных веб-сайтах, чтобы проверить свой код.
Некоторые примеры: http://www.reclaimprivacy.org/, http://www.readability.com/bookmarklets
Ответ Натана наиболее близок к тому, как мы сделали демонстрационную функцию в WebEngage. Чтобы создать такой демо-функционал, вам нужно создать виджет Javascript, который может быть встроен на сторонние сайты. Ответ syserr0r на создание букмарклета - это самый простой способ сделать это. Мы являемся бэкэндом JAVA, и мы используем HttpClient для получения ответов. Как предложил Натан, мы анализируем ответ, дезинфицируем его и добавляем в ответ виджет Javascript. Код виджетов JS оттуда оттуда отображает вкладку "Обратная связь" и загружает демонстрационный короткий обзор.
Раскрытие информации: Я являюсь соучредителем и генеральным директором в WebEngage.
Вы не можете сделать это с помощью JQuery из-за ограничений на межсайтовый скриптинг.
Я предлагаю вам написать PHP script, который загружает URL-адрес, указанный пользователем, и включает в себя ваш код виджетов, а затем возвращает его обратно пользователю.
Я рекомендую использовать букмарклеты. Я создал генератор букмарклетов для добавления ярлыков с поддержкой jQuery на страницу, чтобы упростить разработку.
На странице вы найдете букмарклет суппорта, с которым вы можете столкнуться, просто чтобы показать пример его работы.
Полное раскрытие, это то, что я сделал, я не пытаюсь спамить, поскольку я считаю это актуальным: zbooks
Вы можете создать страницу iframe, которая загружает свою страницу в iframe и использует javascript для ввода вашего кода в iframe.
Вот мой подход...
HTML
<iframe src="http://www.bing.com"></iframe>
<div>I am div</div>
CSS
div { background: red; position: absolute; top: 20px; width: 100px; left:20px;}
iframe{width: 100%; height: 500px;}
вы можете добавить javascript/jquery, чтобы вы могли сделать что-то вроде
jQuery//не на 100% уверен, что он будет работать с кросс-браузером, но вы знаете, стоит попробовать.
$('div').click(function (){
$('iframe').contents().html('changed');///
});
если это не может изменить какое-либо содержимое, вы можете отобразить диалоговое окно, чтобы сказать, что оно нормально работает, если оно было на вашем веб-сайте, а затем используйте подход @syserr0r для пользователей с закладками для получения лучших результатов, поскольку вы предлагаете эти виды услуг, разработчикам, я уверен, что они будут знать о закладках, мой подход будет редко использоваться:), так что надеюсь, что это поможет.
У меня была проблема сходного характера, и основным препятствием является междоменная политика.
Вы должны попросить пользователя поместить ваш код в <script src="..."> или создать прокси-решение, которое добавит вам код для них.
Я пошел на прокси, и вот мои наблюдения:
В качестве альтернативы (если вы не являетесь некоммерческой) вы можете использовать http://www.jmarshall.com/tools/cgiproxy/ и помещать сайт в iframe, а затем делать то, что вы хотите делать с документом iframes, как это происходит в вашем домене благодаря прокси-серверу. Вы можете получить доступ к iframeDOMnode.contentWindow.document, затем и т.д.
Вы можете создать расширение Crossrider, которое ваши пользователи могут загрузить. Затем просто добавьте это в свой код приложения/расширения:
appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")
Затем ваши пользователи могут загрузить расширение (он работает кросс-браузер для Internet Explorer, Chrome и Firefox), и он загрузит ваш JS-код при каждой загрузке страницы.
Вы можете получить приблизительное представление о том, как оно будет выглядеть с помощью iframe. Взгляните на эту ссылку для примера.
http://jsfiddle.net/jzaun/5PjRy/
Проблема с этим приложением заключается в том, что вы не можете перемещать свои DIV при прокрутке страницы, они фактически просто плавают над iframe. Нет никакого способа обойти это, поскольку междоменные скрипты не позволят вам получить доступ к документу iframe для отслеживания событий прокрутки.
Единственный другой вариант, который у вас есть для более подходящего примера, - это загрузить страницу со стороны сервера на любом языке сценариев, который вы используете, и загрузить его в iframe (или в div и т.д.), и вы можете использовать javascript все, что вам нужно, поскольку страница идет из вашего домена.
В вашем примере, как будет выглядеть ваш виджет, я предполагаю, что плавание ваших DIV (ов) над iframe даст достаточно идеи.
Обратите внимание, что приведенный вами пример использует метод на стороне сервера, а не метод iframe.
Я согласен с стратегией букмарклета.
Я поклонник http://bookmarklets.heroku.com/, который позволяет легко создавать букмарклеты, вставлять jQuery и т.д.