Question

我想要实现的是iframe定位在包含PDF文档的另一个iframe上 - 第一个iframe应该是透明的，它应该覆盖带有PDF的iframe。我需要专门用于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 Reader DC（如果它可以正常工作）。

Answer 1

试试这段代码：

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 。

Answer 2

可能这会帮助你

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

Answer 3

对于要显示透明的iframe：

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

Answer 4

我创建了两个html文件，如下所示，它对我有用。我将宽度和高度调整为100％，它按预期工作。不要尝试使用任何jsbin等实例，并且出于安全原因不能在iframe中加载外部网站。尝试使用实际的html文件并将其加载到适用于我的浏览器中。

Html 1：pdf.html

findOne()

Html 2：iframecontent.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>

Answer 5

尝试在外部iframe上设置opacity: 0设置。

使用修改后的代码，

<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-index的元素的顶部。

另一个iframe上的透明iframe

5 个答案: