У меня есть виджет пользовательского интерфейса, который нужно поместить в IFRAME как по соображениям производительности, так что мы можем легко распространить его на партнерские сайты. Пользовательский интерфейс для виджета включает подсказки, которые отображаются поверх другого содержимого страницы. Смотрите скриншот ниже или зайдите на сайт, чтобы увидеть его в действии. Есть ли способ сделать так, чтобы содержимое из IFRAME перекрывало содержимое родительского фрейма?
Нет, это невозможно. Игнорируя любые исторические причины, в настоящее время это будет считаться уязвимостью безопасности - например. многие сайты помещают ненадежный контент в iframe (источник iframe является другим источником, поэтому не может изменять родительский фрейм в соответствии с той же политикой происхождения).
Если у такого ненадежного контента был механизм размещения контента за пределами рамки iframe, он мог бы (например) разместить "идентичный" логин входа (или что-то еще) поверх реальных полей входа в родительский кадр и, таким образом, украсть имя пользователя/пароль. Что бы сосать.
Я не мог найти способ сделать содержимое потока кадров из фрейма, но я нашел способ взломать его, перемещая всплывающую подсказку в родительский документ и помещая его выше (z-index ) iframe.
Подход:
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
Это может быть не по себе, потому что оно непригодно в свете ваших требований, или оно может фактически не помогать (!), но, возможно, стоит проверить UFrame. Это своего рода гибрид iframe и div и, вероятно, может быть упакован как виджет (лучше всего было бы дать клиентам тег <script>, который будет всасывать UFrame и соответствующую разметку). Я не уверен, что вы можете достичь наложения, который вам нужен, но, возможно, стоит поиграть. Извините, я не могу быть более конкретным, но это не то, что я на самом деле использовал сам, я просто добавил его в закладки для дальнейшего использования.
если вы знаете абсолютную вершину значения, которую верхняя часть инструмента может иметь, вы можете создать div, который является высотой контента + наибольшее расстояние, на котором отобразится подсказка инструмента. Выровняйте iframe в нижней части div. убедитесь, что iframe и div прозрачны. то должно отображаться содержимое iframe с кончиком инструмента. Хотя это настраивает вас на головную боль, чтобы убедиться, что такие вещи, как подсветка, работают одинаково во всех браузерах.
Вставьте свой текущий iframe и предлагаемый div внутри родительского iframe, затем оставьте родительский iframe третьим сторонам, лучшим из обоих миров!
Насколько я знаю, это невозможно. Почему бы не использовать запрос XHR и вместо этого заполнить div?