在 Internet Explorer 上使用 iFrame 到 PDF 的动态 Javascript 无法正确隐藏答案

【问题标题】：Dynamic Javascript with iFrame to PDF on Internet Explorer does not hide properly在 Internet Explorer 上使用 iFrame 到 PDF 的动态 Javascript 无法正确隐藏
【发布时间】：2013-07-12 18:10:12
【问题描述】：

使用 Internet Explorer 并显示绑定到 PDF 的 iframe，如果我使用 display:none，PDF 将无法正确关闭。

这是一个功能齐全的示例，根据 Adobe Reader 加载 PDF 所需的时间，PDF 可能无法正确关闭/隐藏。

如果我点击“displaypdf”，PDF 将显示在 iFrame 中，如果我点击关闭 (display:none)，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 Adobe 阅读器 10 视窗 7

【问题讨论】：

标签： jquery html pdf iframe

【解决方案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>

【讨论】：