Прозрачный iframe над другим iframe

То, что я пытаюсь достичь, - это iframe, расположенный над другим iframe, содержащим PDF-документ. Первый iframe должен быть прозрачным, и он должен охватывать iframe с помощью PDF. Мне нужно это специально для IE (9 +).

Код, который я пробовал до сих пор:

<html>
<head>
<style>
</style>

</head>
<body>

<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>

iframeContent.html:

<html>
<style type="text/css">

</style>

<body style="background: transparent">
</body>
</html>

Однако вышеупомянутое не работает - iframe не прозрачен. Кто-нибудь знает, как это решить? Как я сказал в комментариях ниже, решение, размещенное ниже, не работает с установленным устройством чтения Adobe DC (если оно вообще работает).

Ответ 1

Я создал два html файла, как показано ниже, и это сработало для меня. Я скорректировал ширину и высоту до 100%, и он работал так, как вы ожидаете. Не пытайтесь использовать какой-либо jsbin etc экземпляр и его не работает там по соображениям безопасности при загрузке внешнего сайта в iframe. Попробуйте использовать фактический html файл и загрузите его в браузере, который работал у меня.

Html 1: pdf.html

<html>
<head>
    <style type="text/css">
        #outer {
            position: fixed;
            left: 150px;
            top: 20px;
            width: 100px;
            z-index: 2;
        }

        #inner{
            background-color: transparent;
        }

        .cover {
            position: absolute;
            border: none;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: -1;
        }

        #pdf {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>


    <div id="outer">
        <div id="inner">
            <iframe src="iframeContent.html" style="width:90px; height:70px; background-color: transparent;" frameborder="0" allowtransparency="true"></iframe>
        </div>
        <iframe class="cover" src="about:blank" allowtransparency="true"></iframe>
    </div>
    <iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="600px" id="PDF" name="PDF" frameborder="0"></iframe>

</body>

</html>

Html 2: iframecontent.html

    <html>

<body>
    <h1 style="background-color:transparent;">Test</h1>
</body>
</html>

Ответ 2

Попробуйте этот код:

HTML 1

<!--Code for transparent iframe-->
<html>
<body style="background: none transparent">
<div> I am a crappy container on top of this boring PDF</div>
</body>
</html>

HTML 2

<!--Code for both iframes.
<html>
<head>
<style>
</style>

</head>
<body>

<iframe src="SO1.html" frameborder="0" style="width: 100%; height: 300px; position: fixed; left:0px; top: 0px;" allowtransparency="true"></iframe>

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>

Это позиционирует прозрачный iframe правильно поверх PDF. Кроме того, у вас была синтаксическая ошибка для атрибута allowTransparency, у него не должно быть капитала T.

Ответ 3

Возможно, это поможет вам

 <html>
<head>
<style>
</style>

</head>
<body>

<iframe src="iframeContent.html" frameborder="0" style="width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:none transparent;" allowtransparency="true"></iframe>

<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>
</body>
</html>

iframecontent.html

    <html>
<style type="text/css">

</style>

<body style="background:none transparent;">

</body>
</html>

Ответ 4

Для iframe, который вы хотите отображать прозрачно:

body{
  opacity: 0.0;
  background: transparent;
  color: transparent;
}

Ответ 5

Попробуйте установить настройку opacity: 0 на внешнем iframe.

Используя измененный код,

<iframe src="iframeContent.html" frameborder="0" style="opacity: 0; z-index: 2; width: 1000px; height: 1000px; position: fixed; left:0px; top: 0px; background:transparent" allowTransparency="true"></iframe>


<iframe src='http://www.pdf995.com/samples/pdf.pdf' width="100%" height="300px" id="PDF" name="PDF"></iframe>

Вы также можете использовать z-index для управления укладкой элементов. Все элементы, заданные по умолчанию z-indez, равны 1. Тон с более высокими значениями будет отображаться поверх элементов с более низким z-индексом.