如何使用jquery在弹出窗口中打开pdf文件

Question

我的代码抛出JS错误,offsetParent未设置 - 无法滚动.我试过position: relative;但它仍然显示相同的错误.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#btnShow').click(function(){
            $("#dialog").dialog();
        }); 
    });                  
</script>

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display: none; position: relative; height: 4em; overflow: scroll;">
    <div>
        <iframe src="reports/my_pdf.pdf"></iframe>
    </div>
</div>

Answer 1

尝试使用"延迟加载":

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnShow').click(function(){
            $("#dialog").dialog();
            $("#frame").attr("src", "reports/my_pdf.pdf");
        }); 
    });
</script>

<a href="#" id="btnShow">this link</a>
<div id="dialog" style="display: none;">
    <div>
        <iframe id="frame"></iframe>
    </div>
</div>