Подтвердить что ты не робот

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Мое решение: Два iframes, каждый из которых находится внутри 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]

Ответ 2

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

Ответ 3

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

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

Ответ 4

Я нашел решение для этого. Используйте средство просмотра google pdf в 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" >

Ответ 5

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

Ответ 6

Решение для некоторых обстоятельств заключается в том, чтобы обернуть iframe с помощью div и использовать атрибут style '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>