0

Есть iframe, как сделать чтобы после нажатия на кнопку которая находится в iframe, iframe увеличивался на весь экран (fullscreen)? Заранее спасибо.

3 ответа 3

2

Вам нужно получить родителя:

 window.parent

Родителю, для простоты понимания, напишем функцию:

resizeIframe() {
    var iframe = document.getElementById('iframe');
    iframe.style.cssText += 'position: fixed; left: 0; top: 0;';
    iframe.style.width = document.body.clientWidth + 'px';
    iframe.style.height = document.body.clientHeight + 'px';
}

И кнопка во фрейме:

<button onclick="window.parent.resizeIframe();">Кнопка</button>

И самое главное, чтобы домен iframe'a совпадал с доменом родителя.

3
  • Спасибо! А есть возможность fullsceen использовать на других доменах. Любые идеи?
    – DOsS
    30 апр 2013 в 12:15
  • @DOsS политика безопасности говорит о том, что родитель и iframe могут взаимодействовать только на одном домене. Либо из родителя изменяйте положение окна iframe, либо никак.
    – lampa
    30 апр 2013 в 12:18
  • iframe.style.cssText += 'position: fixed; left: 0; top: 0; right: 0; bottom: 0'; будет вполне достаточно)
    – stasQa
    2 мая 2013 в 6:27
1

Можно просто заменить URL топа, кнопка в Ифреймe:

<input id="xbtExpand" type="button" value="Развернуть" onclick="top.location.href = location.href" />

работаеть на разных доменах.

Если такой подход неприемлим и если обе страницы находятся в одном домене - весь код из первого ответа можно расположить в самой Iframe, не трогая родителя, ифрейм может сам к себе обратиться как frameElement

2
  • Уау здорово! А можно это обратно завернуть? <input id="xbtExpand" type="button" value="Развернуть" onclick="top.location.href = location.href" />
    – DOsS
    1 мая 2013 в 14:38
  • В принципе да, самый простой способ - вернуться на предыдущий адрес: <input id="xbtCollapse" type="button" value="Свернуть" onclick="history.back()" /> 1 мая 2013 в 21:19
0

нужен аттрибут allowfullscreen
подробнее про fullscreen в javascript

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.