Встраивание веб-элементов управления на сайты - с помощью IFrames / Javascript

Question

Я просто ищу разъяснения по этому поводу.

Скажем, у меня есть небольшая веб-форма, если хотите, «виджет», который получает данные, выполняет какую-либо проверку на стороне клиента или другую чепуху AJAX-y, и при нажатии кнопки перенаправляет на другую страницу.

Если бы я хотел, чтобы это был «встраиваемый» компонент, чтобы другие люди могли размещать его на своих сайтах, могу ли я ограничиться его инкапсуляцией в iframe?

И есть ли какие-то ограничения на то, что я могу и не могу делать в этом фрейме?

Например, кнопка, которая перенесет вас на другую страницу - это загрузит контент в iframe? Значит, он должен существовать вне iframe?

И, наконец, если бы кнопка, по которой пользователь нажал кнопку, перенаправила их на страницу https для проверки данных кредитной карты, существуют ли какие-либо специальные параметры безопасности, которые могли бы остановить это?

РЕДАКТИРОВАТЬ: В качестве примера того, о чем я рассказываю, подумайте о встраивании в страницу Googlemap или Multimap.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ: Хорошо, я думаю, я понял.

Есть два пути.

Один - встроить в IFrame, но это ограничено.

Два - создайте Javascript API и попросите потребителя дать ссылку на него. Но это намного сложнее как для потребителя, так и для создателя.

Я правильно понял?

Спасибо Дункан

Answer 1

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

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

<a href="http://some.url/with/a/page" target="_top">This is a link</a>
<form action="http://some.url/with/a/page" target="_parent"><button type="submit">This is a button</button></form>

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

В подобных ситуациях виджетами обычно являются фреймы, размещаемые на вашей странице. Гаджеты iGoogle и Windows Live (насколько мне известно) размещаются в iframes, и по очень веской причине - безопасность.

Answer 2

Если вы используете AJAX, я предполагаю, что у вас есть сервер, написанный на C # или Java или некотором языке OO. Неважно, на каком языке будет меняться только синтаксис.

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

Так что ты делаешь?

1. Выполнение вызова на стороне сервера для удаленного сайта
2. Синтаксически проанализировать ответ на сервере
3. Верните через AJAX то, что вам нужно
4. Отображение возвращенного контента пользователю

Вы знаете, как сделать AJAX, просто добавив серверный вызов к удаленному сайту.

Java:

URL url = new URL("http://www.WEBSITE.com");
URLConnection conn = url.openConnection();

или

C #:

HttpWebRequest req = (HttpWebRequest)HttpWebRequest.Create("http://www.WEBSITE.com");
WebResponse res = req.GetResponse();

Answer 3

Я думаю, что вы хотите избежать использования встроенных фреймов, если это возможно. Хотя они иногда полезны, они могут вызвать проблемы с навигацией и закладками. Как правило, если вы можете сделать это не так, как в iframe, это лучший способ.

Учитывая, что вы делаете ссылку на AJAX, указатель Javascript, вероятно, был бы лучшим выбором, т. Е. Встраивал то, что вам нужно делать, в теги сценария. Обратите внимание, что именно так Google встраивает такие вещи, как Google Analytics и Google Ads. Он также имеет преимущество в том, что его можно использовать с URL-адреса, размещенного вами, поэтому вы можете обновить код и «вуаля», он активен на всех веб-страницах, которые его используют. (Google обычно также использует номера версий, поэтому они не переключают всех при внесении изменений).

Что касается сценария с использованием кредитной карты, Javascript связан «той же политикой происхождения». Для уточнения см. http://en.wikipedia.org/wiki/Same_origin_policy

Добавлено: Карты Google работают таким же образом и с некоторыми оговорками, такими как ключ пользователя / сайта, которые явно указывают, кто использует код.

Answer 4

Изучите использование чего-то вроде jQuery, создайте «плагин» для вашего компонента, только одним способом, и просто подумайте, но если вы хотите поделиться компонентом с другими людьми, чтобы использовать это, это одна из вещей, которые можно сделать .