Как сделать Iframe поверх всех элементов на странице?

Question

[Александр Ковалев]

Проблема вот в чем. Есть фрейм помещенный в виджет, виджет подгружается внутри контента пользователя и нам ничего не известно о разметке страницы пользователя. При выполнения действия, из виджета должен раскрываться фрейм на всю ширину страницы, все работает, но некоторые элементы в виде плавающих шапок и прочего перекрывают этот фрейм. Мне понятно почему и понятно, что нужно вынести фрейм выше по DOM дереву, но ЭТО не вариант, так как разметка страницы пользователя нам неизвестна и фрейм должен находится внутри виджета и не может быть перемещен. А контейнер виджета может иметь свою позицию и индекс.
Пример кода ниже:

<div>
    <div id="header" style="position:fixed; z-index:99;width:400px;height:200px;background:#222">Плавающее меню</div>
    <div id="main" style="position:relative; z-index:9;">
          <iframe id="wgt7" name="713b7711ab" src="http://ya.ru" frameborder="0" scrolling="no" style="width: 1858px; height: 
           642px; position: fixed;z-index:9999;border:30px solid white;"></iframe>
     </div>
</div>

У Youtube плеера фрейм может перекрывать все элементы на странице, независимо в каком месте он установлен, но как у него это реализовано, без понятия. Может есть у кого идеи, как можно накрывать фреймом контент, если нельзя контролировать позицию фрейма в DOM? Можно это сделать на JavaScript или CSS?

Answer 1

[Exploding]

Если Ваш фрейм будет лежать в глубине DOM, у Вас не получится сделать его абсолютно поверх всех. Если на странице будут элементы с абсолютным позиционированием и z-index>0 они в любом случае будут ближе по Z чем фрейм.
Вы можете запустить, а точнее отобразить элемент в данном случае фрейм в полноэкранном режиме.
У ютуба как раз так и сделано, если с памятью моей ничего не сталось...
И второй вариант, какая разница, какая там у пользователя разметка. Перемещаем фрейм в конец body да и все. Ставим position:fixed... Ну и т.д.
Вот... Вроде бы нигде не ошибся.
P.S. Если надо, могу поискать "переключатель" для фуллскрина, недавно делал только сам.

UPD.

function toggleFullScreen() {
  if (!document.webkitFullscreenElement) {
      document.documentElement.webkitRequestFullscreen();
  } else {
      document.webkitExitFullscreen(); 
  }
}

//т.е. во врейме тогда
$(document).ready(function(){
   document.documentElement.webkitRequestFullscreen();
});

Ну это для webkit, а вообще полную документацию смотрите там есть обо всем.

Comments

[Александр Ковалев]

Разница вот в чем, когда я выполняю действие во фрейме, оно сохраняет свою позицию. Во фрейме всплывает окно комментариев. Если переместить фрейм, то он перезагрузится и мне нужно выполнить еще одно действие, чтобы открыть форму комментариев. В этом и проблема. Чтобы понять механизм, это кнопка в виджете. Кнопка имеет функционал шеринга, при нажатии всплывает окно комментариев и чтобы оно не обрезалось и выглядело, как будто оно открыто на текущей странице, нужно растянуть фрейм. Поэтому грузить ее за границами виджета не получится.
Вот про полноэранный режим очень интересно, можно это сделать без перезагрузки фрейма?

[Exploding]

alex_kovalevv: Ну попробуйте, я не пробовал именно с фреймами.

function toggleFullScreen() {
  if (!document.webkitFullscreenElement) {
      document.documentElement.webkitRequestFullscreen();
  } else {
      document.webkitExitFullscreen(); 
  }
}

//т.е. во врейме тогда
$(document).ready(function(){
   document.documentElement.webkitRequestFullscreen();
});

Ну это для webkit, а вообще полную документацию смотрите там есть обо всем.

Про перемещение в body я имел ввиду изначально чтобы как только нажали кнопку "Показать"

$(".show-frame-btn").on("click", function(){
    $("frame.ok").show().appendTo("body");
})

И ничего там не будет перезагружаться