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

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

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

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

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

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

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

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

Вы можете получить доступ к родительскому документу 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

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

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

Быстрый контекст:

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

Сначала мы предложили интегрировать наш пользовательский интерфейс в iframe на их веб-сайте, но таким образом данные не могли индексироваться внешними поисковыми системами, такими как Google. Поэтому мы перешли на противоположный принцип: мы интегрируем верхнее меню с их сайта в iframe, который размещается в нашем пользовательском интерфейсе.

Проблема:

Их меню заголовков часто содержат выпадающие подменю. Эти подменю не могут выходить за пределы высоты iframe и усекаются.

Решение:

• Установите iframe в положение css "absolute" с высоким z-индексом, чтобы iframe перекрывал родительский интерфейс.
• В содержимом iframe определите классы объектов, которые могут переполнять окно iframe (в нашем случае мы просим владельца меню добавить конкретное имя класса к этим элементам, но вы можете иметь дело с существующими именами классов).

Затем в JS:

• Получите высоту содержимого iframe (т.е. высоту заголовка без отображаемых раскрывающихся списков).
• Установите начальную высоту iframe на эту высоту.
• Сдвиньте содержимое родительского пользовательского интерфейса с полем, равным этой высоте, чтобы оно не перекрывалось содержимым iframe по умолчанию.
• Добавьте прослушиватель событий, который устанавливает высоту iframe равной 100%, когда указатель мыши находится над определенными классами, которые были идентифицированы. В этом состоянии содержимое iframe может полностью перекрывать родительский контент.
• Добавьте прослушиватель событий, который возвращает исходный размер высоты iframe, когда указатель мыши выходит из определенных классов. В этом состоянии все возвращается в норму.