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

Question

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

Я, конечно, пытался посмотреть, как это делается, но самые интересные части уменьшены и нечитабельны.Так...

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

Answer 1

У Аупахо все правильно.Однако я укажу вам на структуру букмарклетов, которую я разработал для нашего сайта (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, приготовьтесь к трудностям.

Answer 2

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

Answer 3

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

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

javascript: код для добавления тега сценария и инициализации сценария;

Внешний скрипт будет включать в себя:

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

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

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