it-roy-ru.com

слой <div> поверх PDF

Итак, проблема, с которой я сталкиваюсь, выглядит следующим образом: У меня есть слой, который будет помещен поверх 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>
20
Murvinlai

Прочитав некоторые форумы ... (здесь некоторые комментарии)

PDF загружается плагином Acrobat Reader. Он как бы делает свое дело и не имеет к этому никакого отношения ни к HTML, ни даже к браузеру (кроме загрузки браузером). У людей есть такая же проблема с плагином Flash, и нет решение для этого. Так что я думаю, что и для этого нет решения .. Лучше всего изменить дизайн меню, чтобы они не перемещались в пространство, занимаемое PDF-файлом.

Если это плагин, то вы не можете надежно разместить другие элементы поверх него. Браузеры, как правило, отказываются от большей части своих возможностей «наслоения» элементов при подключении плагинов.

Там нет прямой поддержки наложения «z-indexing» div ни в Api, ни в Dom. Плагин загружает исполняемый файл, который, в очень простых терминах, пробивает дыру в окне браузера. Использование метода «iframe shim» является стандартным обходным путем, хотя прозрачность может быть сложной.

Мое решение: Два iframe, каждый внутри div с различным z-index, когда вы нажимаете желтый div, отображается пустой iframe (перед iframe pdf), так что вы можете видеть зеленый div внутри PDF документ.

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

Фернандо Родригес[email protected]

25
Fernando Rodríguez

Существует плагин jquery, bgiframe , который делает реализацию этого исправления довольно простой.

5
Chris Shaffer

Как правило, вы можете обойти эти проблемы z-index, поместив вставку iframe непосредственно под div. То есть он имеет тот же размер и местоположение (но не имеет реального содержимого). Я не уверен на 100%, что это работает для PDF-файлов, но я знаю, что это исправляет некоторые другие проблемы с z-индексами (например, окна выбора в IE6).

прокладки iframe могут быть проблемой, если вы размещаете div динамически, так как вы должны перемещать прокладку iframe вместе с ним.

1
Daniel Lew

Я только что нашел решение для этого. Используйте Google PDF Viewer в iframe, чтобы отобразить ваш PDF на странице, тогда он работает как любой другой div.

пример:

<iframe id = "ifr" SRC = "http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style = "width: 718px; высота: 700px;" frameborder = "0">

1
Blake

Если это IE ваше тестирование, то это может быть та же проблема, что и с ComboBox. Попробуйте вставить iframe в div.

0
Migol

Решением для некоторых обстоятельств является перенос iframe с помощью div и использование атрибута стиля «clip» на div или 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
Brett Caswell