1

Internet Explorer で PDF に関連付けられた iframe を表示している場合、display:none を使用すると PDF が正しく閉じません。

これは完全に機能する例です。Adobe Reader が PDF をロードするのにかかる時間によっては、PDF が適切に閉じたり非表示になったりしない場合があります。

「displaypdf」をクリックすると、iFrame に PDF が表示されます。閉じる (display:none) と、PDF は非表示になりません。できれば「オブジェクト」タグを避けたかったのです。

PDFが隠れない

PDFが確実に閉じるようにする方法は何ですか?

<html>
 <head>   
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>   
   <script type="text/javascript">
    $(document).ready(function() {
        // Note: this is not idiomatic javascript or jquery
        // just wanted to provide an example.
        $('#closePdf').click(function(){
            //$('#dialog').hide();
            $('#dialog').css({
                  'display': 'none' 
            });
        });s        
        $('#displayPdf').click(function(){          
            $("#dialog").empty();
            $("#dialog").append("<iframe src='http://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf'></iframe>");
            $('#dialog').css( {
                'position': 'absolute',
                'right': 100,
                'top': 100,
                'display': 'block'
            });
        });     
     });
   </script>
 </head> 
 <body>    
    <div style="background-color:#F1F1F1; width:900px; height:800px">
        Data  
        <br />
        <a id="displayPdf" href="#">Display PDF</a>  
        <br />      
        <a id="closePdf" href="#">Close PDF</a>
    </div>          
    <div id="forIFrame"></div>    
    <div id="dialog" title="Basic dialog" >      
    </div>
 </body>
</html>

環境：

Internet Explorer 10 Adob​​e Reader 10 Windows 7

4

1 に答える 1

1

サンプル コードの 15 行目に誤った 's' があります。削除した後、コードは機能しているように見えました。あなたの例をもう少しきれいにしました： http://jsfiddle.net/7fPed/

<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>

<body>
  <div style="background-color: #F1F1F1; width: 900px; height: 820px">
    Data            
    <br />
    <a id="displayPdf" href="#">Display PDF</a>
    <br />
    <a id="closePdf" href="#">Close PDF</a>
  </div>

  <div class="frameDiv" style="display: none; position: absolute; left: 200px; top: 20px">
    <iframe style="width: 618px; height: 800px" id="myFrame" src=""></iframe>
  </div>
</body>

<script type="text/javascript">
  $(document).ready(function () {
    var href = "http://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf"

    $('#closePdf').click(function (e) {
      e.preventDefault();
      $('.frameDiv').hide();
    });

    $('#displayPdf').click(function (e) {
      e.preventDefault();
      $('#myFrame').attr("src", href + "#view=VFit" + "&toolbar=0" + "&navpanes=0");
      $('.frameDiv').show();
    });
  });
</script>
</html>
于 2013-07-21T20:45:36.553 に答える