Как отобразить полноэкранный оверлей из iFrame? - PullRequest
Новая
       33

Как отобразить полноэкранный оверлей из iFrame?

1 голос
/ 19 июня 2020

В HTML у меня есть iFrame на моем экране, который занимает только небольшую часть экрана («Мир» в примере ниже).

Из этого iFrame я хочу создать полноэкранный div, но он покрывает только часть iFrame. Как я могу расширить этот div, чтобы он действительно покрыл весь экран?

Пример кода.
main.htm: 

<!DOCTYPE html>
<html>
<body>
<table width=100% style='border:1px solid black;'>
    <tr><td style='border:1px solid black;' width=50%>Hello</td><td style='border:1px solid black;' width=50%>
        <iframe src=test2.htm>
        </iframe>
        </td></tr>
</table>
</body>
</html>

test2.htm: 

<!DOCTYPE html>
<html>
<head>
    <style>
    .BigPhoto {
        display: block;
        z-index:100;
        background-color:red;
        position:fixed;
        height:100%;
        width:100%;
        top: 0;
        left: 0;
    }
    </style>
</head>
<body>
    <div class=BigPhoto>World</div>
</body>
</html>

Result ( красный должен покрывать весь экран): enter image description here

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Хорошо, только что нашел способ. Через javascript перенесите div на верхний слой: 

 var MyDiv = document.getElementById('MyDiv');
 var topFrame=parent.document.getElementById('top');

 topFrame.insertBefore(MyDiv, parent.document.getElementById('wrap_all'));
0 голосов
/ 19 июня 2020

Короче: нельзя. Граница iframe - это абсолютная граница для объектов внутри.

Вы можете попробовать динамически изменить размер Iframe до полной высоты и ширины до JavaScript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...