Как отобразить форму на страницах любого сайта, используя букмарклет (например, Примечание в Google Reader)? - PullRequest
Новая
       22

Как отобразить форму на страницах любого сайта, используя букмарклет (например, Примечание в Google Reader)?

2 голосов
/ 16 сентября 2008

В Google Reader вы можете использовать букмарклет, чтобы «отметить» страницу, которую вы посещаете. Когда вы нажимаете букмарклет, в верхней части текущей страницы отображается небольшая форма Google. В форме вы можете ввести описание и т. Д. Когда вы нажимаете Отправить, форма отправляется сама, не покидая страницы, и затем форма исчезает. В целом, очень приятный опыт.

Я, очевидно, пытался взглянуть на то, как это делается, но самые интересные части минимизированы и не читаются. Итак ...

Есть идеи, как реализовать что-то подобное (на стороне браузера)? Какие проблемы есть? Существующие сообщения в блоге, описывающие это?

Ответы [ 3 ]

3 голосов
/ 16 сентября 2008

Aupajo имеет это право. Я, однако, укажу вам на структуру букмарклета, которую я разработал для нашего сайта (www.iminta.com).

Сам букмарклет гласит: 

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})())

Это просто добавляет новый скрипт в документ, который включает этот файл:

http://www.iminta.com/javascripts/new_bookmarklet.js

Важно отметить, что букмарклет создает iframe, размещает его и добавляет события в документ, чтобы позволить пользователю выполнять такие действия, как нажатие escape (для закрытия окна) или прокрутки (чтобы он оставался видимым). Он также скрывает элементы, которые плохо работают с z-позиционированием (например, вспышка). Наконец, это облегчает общение через JavaScript, который работает внутри iframe. Таким образом, у вас может быть кнопка закрытия в iframe, которая говорит родительскому документу удалить iframe. Этот вид междоменных вещей немного хакерский, но это единственный способ (я видел) сделать это.

Не для чувства сердца; если вы плохо разбираетесь в JavaScript, готовьтесь к борьбе.

0 голосов
/ 16 сентября 2008

Вы можете использовать простой букмарклет для добавления тега , который загружает внешний файл JavaScript, который может помещать необходимые элементы в DOM и предоставлять пользователю модальное окно. Форма отправляется через AJAX-запрос, обрабатывается на стороне сервера и возвращается с успехом или список ошибок, которые пользователь должен исправить.

Таким образом, букмарклет будет выглядеть так:

JavaScript: кода в дополнение скрипт-тег-и-Init-на-скрипт;

Внешний скрипт будет содержать:

  • Возможность добавить элемент в DOM
  • Возможность обновить innerHTML этого элемента, чтобы он был разметкой, которую вы хотите отобразить для пользователя
  • Обработка для обработки формы AJAX

Эффект окна может быть достигнут с помощью позиционирования CSS.

Что касается одного полного ресурса для этой конкретной задачи, вам очень повезет найти что-нибудь. Но взгляните на меньшие, отдельные части, и вы найдете множество ресурсов. Просмотрите информацию о модальных окнах, добавьте элементы в DOM и обработайте AJAX.

0 голосов
/ 16 сентября 2008

На самом базовом уровне будут использоваться createElement для создания элементов для вставки на страницу и appendChild или insertBefore для вставки их на страницу.

...