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

Ответов (6)

В некоторых случаях можно обернуть iframe элементом div и использовать атрибут стиля clip для элемента div или родительского элемента iframe.

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

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

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

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

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

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

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

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

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

Мое РЕШЕНИЕ: два iframe, каждый внутри div с другим z-индексом, когда вы щелкаете желтый 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]

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

пример:

<iframe id = "ifr" src = "http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true" style = "width: 718px; height: 700px ; " frameborder = "0">