2013-07-14 32 views
1

使用Internet Explorer並顯示與PDF綁定的iframe時,如果使用display:none,則PDF無法正常關閉。動態的Javascript與iFrame在Internet Explorer上的PDF無法正確隱藏

這是一個功能完整的示例,具體取決於Adobe Reader需要多長時間才能加載PDF,PDF可能無法正確關閉/隱藏。

如果我點擊'displaypdf',PDF顯示在iFrame中,如果我點擊關閉(display:none),PDF不會隱藏。如果可以,我想避免使用「對象」標籤。

PDF not hiding

什麼是確保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 READER 10 Windows 7的

回答

1

有上線15之後,我刪除它,你的代碼似乎一個錯誤的「在你的示例代碼上班。我清理了你的例子多一點: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> 
相關問題