Есть ли способ получить содержимое из переполнения IFRAME на родительский кадр?

Question

У меня есть виджет пользовательского интерфейса, который необходимо поместить в IFRAME как по соображениям производительности, так что мы можем легко распространить его на партнерские сайты. Пользовательский интерфейс для виджета включает подсказки, которые отображаются поверх другого содержимого страницы. Смотрите скриншот ниже или зайдите на сайт , чтобы увидеть его в действии. Есть ли способ сделать так, чтобы содержимое из IFRAME перекрывало содержимое родительского фрейма?

Answer 1

Нет, это невозможно. Игнорируя любые исторические причины, в настоящее время это будет считаться уязвимостью безопасности - например. многие сайты помещают ненадежный контент в iframes (источник iframe имеет другое происхождение, поэтому не может изменять родительский фрейм в соответствии с той же политикой происхождения).

Если у такого ненадежного контента есть механизм для размещения контента за пределами iframe, он может (например) поместить «идентичный» логин div (или любой другой) над реальными полями входа родительского фрейма и таким образом может украсть имя пользователя / информация о пароле. Что бы сосать.

Answer 2

Я не смог найти способ заставить содержимое фрейма вытекать из фрейма, но я нашел способ взломать его, переместив подсказку в родительский документ и поместив ее выше (z-index ) фрейм.

Подход был:
1) найти iframe в родительском документе
2) удалите элемент подсказки из того места, где он находится в DOM, и добавьте его в родительский документ внутри элемента, который содержит ваш iframe.
3) вам, вероятно, нужно отрегулировать z-индекс и позиционирование, в зависимости от того, как вы это делали.

Вы можете получить доступ к родительскому документу iframe, используя parent.document.

jQuery(tooltip).remove();
var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode;
iframeParent.appendChild(tooltip);
//adjust z-index, positioning

Answer 3

Вложите ваш текущий iframe и предложенный div внутри родительского iframe, затем поместите ваш родительский iframe в третье лицо, лучшее из обоих миров!

Answer 4

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

Answer 5

Это может быть не по назначению, либо потому, что оно непригодно в свете ваших требований, либо может не помочь (!), Но, возможно, стоит проверить UFrame . Это своего рода гибрид iframe и div, и, возможно, его можно упаковать в виде виджета (лучше всего было бы предоставить клиентам тег <script>, который бы впитывал UFrame и соответствующую разметку). В чем я не уверен, так это в том, сможете ли вы получить оверлей, который вам требуется, но, возможно, стоит потренироваться. Извините, я не могу быть более конкретным, но это не то, что я на самом деле использовал сам, я просто добавил это в закладки некоторое время назад для дальнейшего использования.

Answer 6

Насколько я знаю, это невозможно сделать. Почему бы не использовать запрос XHR и вместо этого заполнить div?