Div над iframe, который от самого iframe

Question

У меня есть div, который содержится внутри iframe из внешнего HTML

<iframe src="test.html">

Основанное на html «контекстное меню» должно быть в верхней части iframe, но html-код контекстного меню находится в самом iframe. Чистое решение CSS предпочтительнее.

Answer 1

Содержимое iframe не может быть отображено за пределами iframe. В пределах iframe, div может появляться поверх других элементов, используя «position: absolute» и «z-index: 1000» (или другое подходящее большое число). Обратите внимание, что абсолютно позиционированные элементы удаляются из потока документа. Положение можно установить с помощью CSS-свойств «top», «left», «right» и «bottom».

Answer 2

Ваша действительно дублирующая типичная функциональность "Ajax", поскольку она уже была абстрагирована многими фреймворками (например, jQuery), и вы вряд ли сделаете это лучше, чем я бы попробовал. Не изобретай велосипед.

Вы можете найти отличный пример здесь .

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Answer 3

Пока оба кадра находятся в одном домене, вы можете использовать Javascript для перемещения элемента DOM в родительский кадр (window.parent.document.appendChild(...)). Я сделал это, и это работает. Это просто много хлопот, и вы должны решить сами, стоит ли это того.

Обязательно ознакомьтесь с комментарием Бобинса к вопросу ниже о том, как это сделать.

Не забывайте, что таблицы стилей дочернего фрейма не применяются к меню после его перемещения к родителю.