PDF 顶部的 <div> 层答案

【问题标题】：<div> layer on top of PDFPDF 顶部的 <div> 层
【发布时间】：2010-10-10 05:46:45
【问题描述】：

所以，我面临的问题是这样的：我有一个图层，它将放置在页面上的 pdf 顶部。 PDF 要么用于嵌入，要么用于 iframe 以包含它。但是，CSS 样式不适用于 PDF（因为它是一个插件？）。因此，即使我将 z-index:1000 放在，该层仍然位于 PDF 后面。知道如何解决这个问题吗？

这是代码：

<style type="text/css">
<!--#apDiv1 {
    position:absolute;
    left:543px;
    top:16px;
    width:206px;
    height:223px;
    z-index:1000;
    background-color:#999999;
}
</style>
<body>
  <!-- embed the pdf  -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
  alt : <a href="test.pdf">test.pdf</a>
</object>

  <!-- layer -->

<div id="apDiv1" >Whatever text or object here.</div>
</body>

【问题讨论】：

顺便说一句，“always-on-top”标签可能是我目前最喜欢的标签。

标签： css pdf html always-on-top

【解决方案1】：

在阅读了一些论坛之后......（这里有一些 cmets）

PDF 由 Acrobat Reader 插件加载。它有点做它自己的事情，与任何 HTML 甚至浏览器无关（除了由浏览器加载）。人们对 Flash 插件也有同样的问题，并且没有解决方案。所以我想也没有解决方案。你最好的办法是重新设计你的菜单，这样它们就不会进入 pdf 占用的空间。

如果它是一个插件，那么你不能可靠地将其他元素放在它上面。当涉及插件时，浏览器通常会放弃大部分“分层”元素的能力。

没有直接支持在 Api 或 Dom 中覆盖“z-indexing”一个 div。插件加载一个可执行文件，简单来说，就是在浏览器窗口上打了一个洞。使用“iframe shim”技术是标准解决方法，尽管透明度可能很棘手。

我的解决方案：两个iframe，每个都在一个不同z-index的div中，当你点击黄色的div时，会显示空的iframe（在pdf iframe的前面），所以你可以看到pdf文档里面的绿色div。

<html>
<head>
     <script type="text/javascript">
        function showHideElement(element){
            var elem = document.getElementById(element);

            if (elem.style.display=="none"){
                elem.style.display="block"
            }
            else{
                elem.style.display="none"
            }
        }
    </script>
</head>
<body>
    <div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
    <div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>

    <div style="position:absolute;z-index:20;margin-left:200px;">
    <iframe visible="true"  id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

    <div style="position:absolute;z-index:10;margin-left:100px;">
    <iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

</body>
</html>

费尔南多·罗德里格斯 frodale@gmail.com

【讨论】：

好主意。我还面临另一个挑战，其中有可以在窗口周围拖动和移动的 div 层。因此，当它移动到 pdf 上方时，它将被 pdf 部分“隐藏”。 :) 我认为这是一个更艰巨的挑战，我还没有很好地解决它。
"人们对 Flash 插件也有同样的问题，但没有解决方案。"这种说法是不正确的。您可以在 flash 内容的 embed 标记中添加属性“wmode=opaque”，并且可以在 html 后面显示 flash。
虽然这将是一个很好的答案，但 div 和 iframe 并不透明，一旦使它们透明，它就不再显示在 pdf 上方
@sv_in 你的说法在 IE11 上也是不正确的。设置 wmode=opaque 不会使 object 标签显示在 div 下`

【解决方案2】：

有一个 jquery 插件，bgiframe，它使得实现这个修复相当简单。

【讨论】：

【解决方案3】：

通常，您可以通过将 iframe shim 直接放在 div 下方来解决这些 z-index 问题。也就是说，它具有相同的大小和位置（但没有实际内容）。我不是 100% 确定这适用于 PDF，但我知道这可以解决其他一些 z-index 问题（例如 IE6 上的选择框）。

如果您动态放置 div，iframe 垫片可能会很麻烦，因为您必须随之移动 iframe 垫片。

【讨论】：

然后将 iframe shim 动态地放置到 div 元素的父元素的 appendTo 中。（我知道这是 2009 年发布的，您可能已经做了很多，但对于阅读本文的人，不妨在这里留下一个小评论）

【解决方案4】：

我刚刚找到了解决方案。使用 iframe 中的 google pdf 查看器在页面上显示您的 pdf，然后它就像任何其他 div 一样工作。

示例：

【讨论】：

那将是一个很好的解决方案，但事实是IE8不允许它显示在一个框架中，给出一个消息“此内容不能显示在一个框架中”，类似的FireFox会不显示它，只有 chrome 但 chrome 无论如何都不会出现这里的问题，您可以直接在 PDF 上书写

【解决方案5】：

如果您的测试是 IE，那么它可能与 ComboBox 的问题相同。尝试将 iframe 插入 div。

【讨论】：

【解决方案6】：

在某些情况下，解决方案是使用 div 包装 iframe，并在 div 或 iframe 父级上使用样式属性“clip”。

<!DOCTYPE html>
<html>
<head>
    <title>Test Page - IFramed PDF Document Clipping</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>

        <style type='text/css'>
            body {padding:0em;margin:0em;font-size:16px;position:relative;}
            body * {line-height:1em;}
            #TOPNAV {list-style:none;display:block;}
            #TOPNAV li {display:inline;}
            #IFRAMEWRAPPER 
            {
                display:block;margin:0em;padding:0em;
                position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
            }
            #docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
            input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
            .clearfix {zoom:1;}
        </style>

        <script type='text/javascript'>
            $(document).ready(function () {

                $('#TOPNAV input').click(function () {
                    $("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
                    $(this).toggleClass('ACTIVE');
                    $("#IFRAMEWRAPPER").css("padding", "1em");
                    $("#IFRAMEWRAPPER").css("padding", "0em");

                    $("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").hide();
                    $("#IFRAMEWRAPPER").slideDown(2);
                });

                $('#btnCLICK1').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
                });
                $('#btnCLICK2').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
                });
                $('#btnCLICK3').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
                });
                $('#btnCLICK4').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
                });
            });
        </script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
    <ul id='TOPNAV'>
        <li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
        <li><input type='button' id='btnCLICK2' value='LEFT' /></li>
        <li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
        <li><input type='button' id='btnCLICK4' value='TOP' /></li>
    </ul>
</div>
<div id="IFRAMEWRAPPER">
    <iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>

</body>
</html>

【讨论】：