11

What I'm trying to achieve is an iframe positioned over another iframe containing a PDF document - the first iframe should be transparent, and it should cover the iframe with PDF. I need this specifically for IE (9+).

The code I've tried so far:

<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>

However, the above doesn't work - the iframe is not transparent. Does anyone know how to solve this? As I said in the comments below, the solution posted below doesn't work with Adobe reader DC installed (if it works at all).

user4205580
  • 564
  • 5
  • 25
  • What's the point of having a transparent Iframe over another one? Do you want to prevent users from touching the PDF perhaps? In that case, I recommend you to use `pointer-events: none;` instead, as it's a far easier way to achieve that. – Antonio Hernández Oct 06 '16 at 19:58
  • @AntonioHernández Because I need to put some other objects (standard html elements, divs, etc. - think of a page menu that should be visible all the time) on top of the iframe with PDF, and the only way to do that is to place an iframe between the PDF and my div. And at the same time I want the PDF to remain visible. http://stackoverflow.com/a/12977151/4205580 – user4205580 Oct 06 '16 at 20:24
  • if you cover one iframe over another even if u make make it transparent u cant select pdf text content of second iframe – Rahul Oct 20 '16 at 14:44
  • @Rahul Yes, I'm fully aware of this, but that's not a problem for me. What I need exactly is a transparent iframe placed above the pdf. I only need to see the content of the pdf. – user4205580 Oct 20 '16 at 16:03
  • @user4205580 please have a look at my answer. It worked if you follow the same as me. –  Oct 21 '16 at 04:34
  • Don't use iframe for the menu elements, but normal divs. these can be transparent and do the same thing. There is no reason to use iframes for this. @user4205580 – GeNyaa Oct 21 '16 at 12:55

5 Answers5

1

Try this code:

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>

This positions the transparent iframe correctly on top of the PDF. Also, you had a syntax error for the attribute allowTransparency, it shouldn't have a capital T.

Antonio Hernández
  • 466
  • 2
  • 10
  • Yes, it does position the iframe on top of the PDF, but I didn't have any issue with achieving that. The question is how to make that top iframe completely transparent (I want to see the PDF through that iframe). If you run your example you'll see it doesn't work that way. – user4205580 Oct 06 '16 at 22:23
  • The code I shared with you does exactly that, it makes the top iframe completely transparent, you can see the PDF through it. – Antonio Hernández Oct 06 '16 at 22:26
  • 1
    For some reason it doesn't work for me. I'm using IE 11 with Adobe reader DC. – user4205580 Oct 07 '16 at 05:56
1

May be this will helps you

 <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>
ubm
  • 636
  • 11
  • 21
1

For the iframe which you want to display transparent:

body{
  opacity: 0.0;
  background: transparent;
  color: transparent;
}
Jared Chu
  • 2,757
  • 4
  • 27
  • 38
1

I created two html files as below and it worked for me. I adjusted the width and height to 100% and it worked as you expect. Don't try with any jsbin etc instance and its not working there for security reasons as you load external site in iframe. Try with actual html file and load them in the browser which worked for me.

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>
  • I just put pdf.html and iframecontet.html in the same folder, opened the pdf.html with IE 11 and nope, it doesn't work. The iframe is not transparent. – user4205580 Oct 21 '16 at 07:15
  • Okay, I tested in chrome and it is good. Let me have a look in IE 11. –  Oct 21 '16 at 07:18
  • That's the main problem. It's easy to get it to work in other browsers, but the question was specifically about IE. – user4205580 Oct 21 '16 at 07:20
  • Sure, I will give a try –  Oct 21 '16 at 07:35
  • May I please know your main purpose of showing iframe on top of the pdf, is to restrict clicking buttons like download etc? –  Oct 21 '16 at 08:22
  • Putting iframe above the pdf will allow me to put other content over the pdf, like divs and other html elements. See here: http://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe/12977151#12977151 – user4205580 Oct 21 '16 at 08:43
  • I have updated the code above. Can you please give a try and advise this is what you are referring or something different? –  Oct 21 '16 at 09:12
  • The iframe content should be transparent, but right now the 'Test' text has a white background. – user4205580 Oct 21 '16 at 09:28
0

Try setting setting opacity: 0 on the outer iframe.

Using your modified code, 

<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>

You can also use z-index to manage stacking of elements. All elements default z-indez is 1. THose with higher values will appear on top of elements with a lower z-index.

Naltroc
  • 989
  • 1
  • 14
  • 34