图层位于 PDF 之上

发布于 2024-07-13 20:52:05 字数 737 浏览 10 评论 0原文

所以，我面临的问题是这样的：我有一个图层，它将放置在页面上的 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>

原文

So, the problem I face is like this:
I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?

here is th code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海夕 2024-07-20 20:52:05

阅读一些论坛后...（这里有一些评论）

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

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

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

我的解决方案：
两个 iframe，每个 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>

费尔南多·罗德里格斯
[电子邮件受保护]

After reading some forums... (here some comments)

The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser).
People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either.
Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.

If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.

The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.

My SOLUTION:
Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.

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

Fernando Rodríguez
[email protected]

回复收藏 0 原文

ι不睡觉的鱼゛ 2024-07-20 20:52:05

有一个 jquery 插件 bgiframe，可以使此修复的实施变得相当简单。

回复收藏 0 原文

情栀口红 2024-07-20 20:52:05

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

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

回复收藏 0 原文

橘和柠 2024-07-20 20:52:05

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

例子：

回复收藏 0 原文

臻嫒无言 2024-07-20 20:52:05

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

回复收藏 0 原文

淡淡绿茶香 2024-07-20 20:52:05

某些情况下的解决方案是用 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>

A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or iframe parent.

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

回复收藏 0 原文

~没有更多了~