另一个 iframe 上的透明 iframe答案

【问题标题】：Transparent iframe over another iframe另一个 iframe 上的透明 iframe
【发布时间】：2017-02-15 16:55:10
【问题描述】：

我想要实现的是一个 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 不透明。有谁知道如何解决这个问题？正如我在下面的 cmets 中所说，下面发布的解决方案不适用于安装了 Adobe Reader DC（如果可以的话）。

【问题讨论】：

透明 Iframe 比另一个 Iframe 有什么意义？您是否想阻止用户触摸 PDF？在这种情况下，我建议您改用pointer-events: none;，因为它更容易实现。
@AntonioHernández 因为我需要在带有 PDF 的 iframe 顶部放置一些其他对象（标准 html 元素、div 等 - 想想应该始终可见的页面菜单），并且唯一的方法是在 PDF 和我的 div 之间放置一个 iframe。同时我希望 PDF 保持可见。 stackoverflow.com/a/12977151/4205580
如果您将一个 iframe 覆盖在另一个 iframe 之上，即使您将其设为透明，您也无法选择第二个 iframe 的 pdf 文本内容
@Rahul 是的，我完全意识到这一点，但这对我来说不是问题。我确切需要的是放置在 pdf 上方的透明 iframe。我只需要看pdf的内容。
@user4205580 请看看我的回答。如果你和我一样，它会起作用。

标签： html css internet-explorer iframe

【解决方案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。

【讨论】：

是的，它确实将 iframe 定位在 PDF 的顶部，但我在实现这一点方面没有任何问题。问题是如何使顶部 iframe 完全透明（我想通过该 iframe 查看 PDF）。如果你运行你的例子，你会发现它不是那样工作的。
我与您分享的代码正是这样做的，它使顶部 iframe 完全透明，您可以通过它查看 PDF。
由于某种原因它对我不起作用。我将 IE 11 与 Adobe Reader DC 一起使用。

【解决方案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>

【讨论】：

【解决方案3】：

对于要显示透明的 iframe：

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

【讨论】：

即使你使用*{ opacity: 0.0; background: transparent; color: transparent; }
是的，不起作用。你测试过吗？您的操作系统、Adobe reader 插件版本和 IE 版本是什么？
很难测试，因为我使用的是 ubuntu :(

【解决方案4】：

我创建了两个 html 文件，如下所示，它对我有用。我将宽度和高度调整为 100%，它按您的预期工作。当您在 iframe 中加载外部站点时，请勿尝试使用任何 jsbin 等实例，并且出于安全原因，它无法在那里工作。尝试使用实际的 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>

【讨论】：

我只是将 pdf.html 和 iframecontet.html 放在同一个文件夹中，用 IE 11 打开 pdf.html 并没有，它不起作用。 iframe 不透明。
好的，我用 chrome 测试过，很好。让我看看 IE 11。
这是主要问题。让它在其他浏览器中运行很容易，但问题是专门针对 IE 的。
好的，我试试
请问您在 pdf 上显示 iframe 的主要目的是限制点击下载等按钮吗？

【解决方案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 的元素之上。

【讨论】：