Чем заменить тег iframe
Лучшая альтернатива iframe?
У меня есть страница с iframe, чтобы отображать содержимое вкладки clicked. Есть 3 вкладки и 1 iframe. Источники содержимого, относящиеся к каждой нажатой вкладке, отформатированы и закодированы в других файлах html и css.
Что еще является альтернативой использованию iframe, потому что я заметил, что при нажатии на вкладку все еще отображается белый фон, похожий на загрузку новой страницы?
8 ответов
Единственная альтернатива использованию IFRAME для загрузки динамического содержимого (после загрузки страницы) использует AJAX для обновления контейнера на вашей веб-странице. Это довольно элегантно и обычно быстрее, чем загрузка полной структуры страницы в IFRAME.
Другой альтернативой является использование AJAX для загрузки содержимого вкладки и использование div для отображения содержимого. Я бы предположил, что использование существующей библиотеки вкладок может быть вариантом, а не попыткой решить все проблемы, связанные с созданием вкладок.
Возможно, здесь может быть полезно вкладка jQuery UI, если вы хотите попробовать.
EDIT: пример AJAX с вкладками пользовательского интерфейса.
Во-первых, HTML будет выглядеть следующим образом.
Затем убедитесь, что вы импортируете соответствующие файлы jQuery:
Затем добавьте код для создания вкладок:
Есть альтернатива AJAX!
Вы можете загрузить ВСЕ три возможных содержимого в отдельные DIV.
Затем нажатие на вкладку просто сделает атрибут отображения соответствующего содержимого DIV «блоком», пока свойство отображения двух других DIVs «none» не будет.
Дешево, легко, не требует затрат AJAX для дополнительного HTTP-запроса или для кодирования.
Вам не нужно script.
Если вы показываете контент с помощью script, всегда скрывайте его с помощью script. Пусть он грамотно деградирует, если script не работает.
HTML iframe должен использоваться для включения/отображения не-шаблона, например файла PDF. Он считал плохую практику, когда используется для содержимого шаблона (т.е. HTML), как в отношении SEO, так и в UX.
В вашем случае вы просто хотите иметь панель с вкладками. Это можно решить несколькими способами:
Имейте кучу ссылок в виде вкладок и один div в качестве содержимого вкладки. Используйте Ajax для асинхронного получения содержимого вкладки и использования JavaScript для замены содержимого текущей вкладки на новый контент.
Имейте кучу ссылок в виде вкладок и один div в качестве содержимого вкладки. Пусть каждая ссылка отправляет другой параметр запроса GET или pathinfo, представляющий вкладку кликов. Используйте управление потоком на стороне сервера (PHP if() или JSP и т.д.) Или включите возможности (PHP include() или JSP и т.д.), Чтобы включить нужное содержимое вкладки в зависимости от параметра /pathinfo.
Когда вы собираетесь использовать подход на основе JavaScript, я могу рекомендовать jQuery для этого.
Велосипед: альтернатива iframe на jQuery.ajax как инструмент разработки mash-up приложений. Есть ли смысл?
Всем привет! Хочу предложить вниманию сообщества технический механизм, позволяющий без лишних усилий сделать iframe-подобное приложение, работающее на ajax. В качестве основы использованы jQuery и easyXDM.
Техническое описание, прототип, предположения о возможных вариантах использования и сомнения под катом.
Прежде всего, хочу сказать, что в статье под мэшапом я подразумеваю не общее понятие,
а конкретный, частный случай. Когда нужно, работающее на одном домене веб-приложение
( сервис ) — встроить в другое ( площадка ).
Пользователь находится на странице площадки и может взаимодействовать с сервисом.
Недостатки существующих решений
iframe
Домен третьего уровня на сервере сервиса
Предлагаемое решение позволяет быстро организовать мешап из уже работающего приложения или легко создать новое.
Демо прототипа
Никак не тестировал под Mac 🙁
Это сервис ( обычное php приложение, использующее различные веб-механизмы ) и различные тестовые площадки, на которые встраивается сервис. Имеются php исходники сервиса, в них в комментариях указаны моменты, которые необходимы, чтобы он работал как мешап ( будут описаны далее в статье, в коде в комментариях будут отмечены как #for_mashup# ). Хостинг находится на другой стороне планеты (есть реальные http задержки), это позволяет в некоторых браузерах увидеть невооруженным глазом преимущество ajax в скорости перед обычным web приложением. Подразумевается не первое открытие страницы, а последующие переходы по ссылкам сервиса.
Технические моменты
Серверная часть сервиса. Чтобы все заработало, необходимо в серверную часть приложения сервиса добавить специальный код, который подменит обычный ответ сервера на ответ jsonp. Например ответ сервиса на GET запрос:
Эти подмены позволяют посылать кроссдоменные ajax запросы на сервер сервиса с браузера, находящегося на странице платформы. Таким же образом передается location для случая имитации 301 HTTP ответа сервиса. Например:
В языке php такая подмена легко реализуется с помощью навешивания output callback через функцию ob_start. Непосредственно для разработчика сервиса, достаточно будет в скрипте который выполняется на всех страницах сделать дополнительный include специального скрипта, который внутри себя все это сделает.
Необходимо положить в определенное место swf файл для easyXDM, чтобы приложение работало в браузерах
Новый HTML-элемент
от Google призван заменить фреймы
На конференции разработчиков I/O 2019 компания Google представила новую технологию под названием «порталы», которая призвана обеспечить новый способ загрузки и навигации по веб-страницам.
По словам Google, «порталы» работают с помощью нового HTML-тега под названием
позволяет перемещаться внутри контента, который внедрён на страницу извне, а не позволяет этого по соображениям безопасности.
может переписывать URL в адресной строке браузера, то есть этот тег полезнее в качестве инструмента навигации. Опять же, на такое не способен.
Вот таблица со сравнением
Инженеры Google надеются, что новая технология порталов захватит интернет и станет стандартным способом перехода по ссылкам между сайтами.
Например, когда пользователь просматривает новостной сайт и заканчивает чтение страницы, то есть доходит до нижней её части, то ссылки на «похожие статьи» будут встроены в качестве порталов. Зачем веб-разработчику оформлять их таким образом? Преимущество использования порталов по сравнению с классическими ссылками заключается в том, что содержимое внутри порталов может быть предварительно загружено и предварительно отрендерено с загрузкой всего дерева DOM, то есть оно отобразится мгновенно.
Эту функцию впервые анонсировали на саммите Chrome Dev в ноябре прошлого года, но теперь порталы поддерживаются в последней версии Chrome Canary для Android, Mac, Windows, Linux и Chrome OS.
Правда, по умолчанию она пока отключена. Чтобы её включить в Chrome Canary, следует активировать флаг порталов в настройках chrome://flags/#enable-portals.
На данный момент только Chrome поддерживает эту технологию, другие браузеры пока не выразили интереса. Но если у вас подходящий браузер, то можно поэкспериментировать с порталами на демо-странице. Там указываете адрес любой страницы, сайт сгенерирует ссылку в формате
— вы можете перейти по ней и оценить, насколько быстро осуществляется переход на предварительно отрендеренную страницу.
Google позиционирует порталы как технологию для лучших переходов между веб-страницами, подчеркивая, что её можно использовать для улучшения навигации на мобильных устройствах, где сенсорные жесты делают использование порталов особенно удобными. То есть навигация между страницами на сайтах и веб-контентом становится такой же быстрой и осуществляется по сути такими же жестами, как переходы между экранами нативного приложения.
Внедрив этот тег в свой браузер, Google подала его на утверждение в WCIG. Если разработчики других браузеров поддержат инициативу (а что им остаётся в условиях фактической монополии Chrome), то технология может стать новым стандартом, заменив привычные фреймы. Порталы позволяют пользователю смотреть/слушать внедрённый контент, а затем легко переходить на его исходную страницу, где можно оставлять комментарии или открывать другие страницы.
Более подробную техническую информацию о порталах см. в черновике стандарта WICG и документации Google.
Некоторые комментаторы на форумах выражают опасение, что новая функция может быть полезна Google для отслеживания пользователей. Ведь какая ситуация сейчас? Многие люди сразу после подключения к интернету заходят на Google, ищут нужный сайт — и уходят с Google. Нехорошо. А после внедрения порталов получится, что пользователь нажмёт на ссылку в результатах поиска — страница загрузится как портал, адрес в поисковой строке поменяется, как и раньше, но фактически человек остаётся на сайте Google — и компания может отслеживать его действия. Впрочем, это лишь версия. Возможно, Google на самом деле хочет сделать более удобной работу пользователей и вовсе не думает о собственных интересах.
| Предпосылки: | Базовая компьютерная грамотность, установка базового программного обеспечения, базовые знания работы с файлами, знакомство с основами HTML (как описано в разделе Начало работы с HTML) и предыдущими статьями в этом модуле. |
|---|---|
| Задача: | Узнать, как встраивать элементы в веб-страницы, используя (en-US), и (en-US), например, флеш-ролики и другие веб-страницы |
Краткая история внедрения
Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.
Активное обучение: использование классического внедрения
В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя (en-US).
Дополнительно вы также можете попробовать внедрить карту Google следующим образом:
Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.
Подробно об Iframes
Этот пример включает основы, необходимые для использования :
Примечание: Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель SEO.)
Проблемы безопасности
Clickjacking – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.
Используйте только при необходимости
Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на licensed under CC-BY-SA. Это означает, что вы должны относиться к нам с уважением, когда цитируете наш контент, даже если внесли в него существенные изменения.
Используйте HTTPS
HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :
Примечание: Github pages позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.
Всегда используйте атрибут sandbox
Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется sandbox.
Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут sandbox без параметров, как показано в предыдущем примере.
Примечание. «Песочница» не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого domain на ваш основной сайт.
Настройка директив CSP
Примечание: вы можете прочитать пост Фредерика Брауна On the X-Frame-Options Security Header для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
_и_ «>_и_ » title=»Permalink to Элементы и «>Элементы и
Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:
