Отображение демонстрации моего CSS на любом веб-сайте

Я разработал небольшой компонент, который можно поместить на любой сайт. Теперь я хочу разработать код, который мог бы продемонстрировать, как мой компонент будет выглядеть на любом веб-сайте.

Итак, человек придет на мою страницу и разместит его URL-адрес, а затем мой код должен включить мой пользовательский JS/CSS в загруженный HTML и отобразить его. Что-то вроде этого.

Здесь, как и вкладка обратной связи, я хочу показать свой компонент где угодно на этой странице.

Ответы

Ответ 1

В приведенном примере они запрашивают страницу, указанную в параметре querystring url на сервере, а затем выполняют более или менее следующие шаги:

  • В теге <head> они добавляют тег <base href="url" /> к документу. Тег base сделает любые относительные ссылки в документе обработкой значения в атрибуте href в качестве своего корня. Вот как они обходят сломанные css/изображения. (Тег base поддерживается всеми браузерами)
  • В конце документа (IE тег </body>) они вводят javascript, который запускает свои демонстрации.
  • Они обслуживают измененный HTML, указанный в браузере.

Все это довольно просто в реализации. Вы можете использовать регулярные выражения для соответствия тегам <head> и </body> для шагов 1 и 2 соответственно. В зависимости от платформы сервера, как вы на самом деле запрашиваете страницу, она будет меняться, но вот несколько ссылок, которые помогут вам начать:

Ответ 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

Ответ 3

Ответ Натана наиболее близок к тому, как мы сделали демонстрационную функцию в WebEngage. Чтобы создать такой демо-функционал, вам нужно создать виджет Javascript, который может быть встроен на сторонние сайты. Ответ syserr0r на создание букмарклета - это самый простой способ сделать это. Мы являемся бэкэндом JAVA, и мы используем HttpClient для получения ответов. Как предложил Натан, мы анализируем ответ, дезинфицируем его и добавляем в ответ виджет Javascript. Код виджетов JS оттуда оттуда отображает вкладку "Обратная связь" и загружает демонстрационный короткий обзор.

Раскрытие информации: Я являюсь соучредителем и генеральным директором в WebEngage.

Ответ 4

Вы не можете сделать это с помощью JQuery из-за ограничений на межсайтовый скриптинг.

Я предлагаю вам написать PHP script, который загружает URL-адрес, указанный пользователем, и включает в себя ваш код виджетов, а затем возвращает его обратно пользователю.

Ответ 5

Я рекомендую использовать букмарклеты. Я создал генератор букмарклетов для добавления ярлыков с поддержкой jQuery на страницу, чтобы упростить разработку.

На странице вы найдете букмарклет суппорта, с которым вы можете столкнуться, просто чтобы показать пример его работы.

Полное раскрытие, это то, что я сделал, я не пытаюсь спамить, поскольку я считаю это актуальным: zbooks

Ответ 6

Вы можете создать страницу iframe, которая загружает свою страницу в iframe и использует javascript для ввода вашего кода в iframe.

Ответ 7

Вот мой подход...

http://jsfiddle.net/L2kEf/

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 для пользователей с закладками для получения лучших результатов, поскольку вы предлагаете эти виды услуг, разработчикам, я уверен, что они будут знать о закладках, мой подход будет редко использоваться:), так что надеюсь, что это поможет.

Ответ 8

У меня была проблема сходного характера, и основным препятствием является междоменная политика.

Вы должны попросить пользователя поместить ваш код в <script src="..."> или создать прокси-решение, которое добавит вам код для них.

Я пошел на прокси, и вот мои наблюдения:

  • легко создать базовый прокси-сервер в php - есть несколько php-прокси на sourceforge, и Бен Алман создал простой php-прокси для AJAX. Основываясь на тех, я смог создать php-прокси, правильно изменяя содержимое за один день.
  • после этого я потратил много времени на то, чтобы работать с большим количеством сайтов с проблемами. Вы никогда не сможете создать идеальный прокси.

В качестве альтернативы (если вы не являетесь некоммерческой) вы можете использовать http://www.jmarshall.com/tools/cgiproxy/ и помещать сайт в iframe, а затем делать то, что вы хотите делать с документом iframes, как это происходит в вашем домене благодаря прокси-серверу. Вы можете получить доступ к iframeDOMnode.contentWindow.document, затем и т.д.

Ответ 9

Вы можете создать расширение Crossrider, которое ваши пользователи могут загрузить. Затем просто добавьте это в свой код приложения/расширения:

appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")

Затем ваши пользователи могут загрузить расширение (он работает кросс-браузер для Internet Explorer, Chrome и Firefox), и он загрузит ваш JS-код при каждой загрузке страницы.

Ответ 10

Вы можете получить приблизительное представление о том, как оно будет выглядеть с помощью iframe. Взгляните на эту ссылку для примера.

http://jsfiddle.net/jzaun/5PjRy/

Проблема с этим приложением заключается в том, что вы не можете перемещать свои DIV при прокрутке страницы, они фактически просто плавают над iframe. Нет никакого способа обойти это, поскольку междоменные скрипты не позволят вам получить доступ к документу iframe для отслеживания событий прокрутки.

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

В вашем примере, как будет выглядеть ваш виджет, я предполагаю, что плавание ваших DIV (ов) над iframe даст достаточно идеи.

Обратите внимание, что приведенный вами пример использует метод на стороне сервера, а не метод iframe.

Ответ 11

Я согласен с стратегией букмарклета.

Я поклонник http://bookmarklets.heroku.com/, который позволяет легко создавать букмарклеты, вставлять jQuery и т.д.