Firefox 在加载 iFrame 时遇到问题

Question

我在使用 Firefox 和在 iframe 中加载 PDF 时遇到了一个奇怪的问题。这是页面的作用。 - 从下拉列表中选择一个项目 - 根据选择在 iframe 中加载 PDF。

除 FF 外，所有其他浏览器都可以正常工作。选择一个项目以加载左下角的状态为“已停止”。我启动了 Firebug，但没有 HTTP 操作。好像一切都停止了。

这就是问题所在。当我弹出 DIV 框时，我可以通过在下拉列表中进行选择来将 PDF 加载到 FF 中。一旦我关闭 div，它就不会加载。

这里是加载 PDF 的 jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%= ddlSpecialty.ClientID %>").change(function() { 
            var selected = $("#<%= ddlSpecialty.ClientID %> option:selected");    
            var speciality = selected.text();
            switch (speciality) {
                case 'Cardiology': 
                    window.open('./../PDF/SpecialityGuidelines/SPECIALTY-cardiology.pdf','Specialtyframe');
                    break;
                ; 
                case 'Neurology': 
                    window.open('./../PDF/SpecialityGuidelines/SPECIALTY-Neurology.pdf','Specialtyframe');
                    break; 
                ; 
                case '-- Select Specialty --': 
                    window.open('Specialty.html','Specialtyframe');
                    break; 
                ; 
           }


        });
    });

</script>

<div id="Clean_ContentPlaceHolder1_c2_flyout_content" style="display:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;"> 
                <div class="modalcontainer" style="width: 700px;"> 
                    <div class="modalheader"> 
                        <span id="Clean_ContentPlaceHolder1_c2_flyout_Label3" class="modalmsg">Specialty PDF</span> 
                        <img class="modalclose" alt="Close" title="Close" onclick="Clean_ContentPlaceHolder1_c2_flyoutimgPDF.Close();" style="cursor: pointer;" /> 
                    </div> 
                    <div class="modalbody" style="height: 500px;"> 
                        <table width="100%" cellpadding="5" cellspacing="0"> 
                            <tr> 
                                <td> 
                                    <iframe id="Specialtyframe" name="Specialtyframe" frameborder="0" width="650px" height="500px" src="Specialty.html"> 
                                        [Your browser does <em>not</em> support <code>iframe</code>, or has been 
                                        configured not to display inline frames. You can access <a href="../PDF/SpecialityGuidelines/SPECIALTY-Cardiology.pdf">
                                            the document</a> via a link though.]
                                    </iframe> 
                                </td> 
                            </tr> 
                        </table> 
                    </div> 
                </div> 
            </div>
    <div id="Clean_ContentPlaceHolder1_c2_flyout_contentbox"></div> 

有什么想法吗？

Answer 1

有趣的方法。为什么不尝试像这样操作iframe 的 src 属性？

<script type="text/javascript">
    $(document).ready(function() {
        $("#<%= ddlSpecialty.ClientID %>").change(function() { 
            var selected = $("#<%= ddlSpecialty.ClientID %> option:selected");    
            var speciality = selected.text();
            switch (speciality) {
                case 'Cardiology': 
                    $('#Specialtyframe').attr('src','./../PDF/SpecialityGuidelines/SPECIALTY-cardiology.pdf');
                    break;
                ; 
                case 'Neurology': 
                    $('#Specialtyframe').attr('src','./../PDF/SpecialityGuidelines/SPECIALTY-Neurology.pdf');
                    break; 
                ; 
                case '-- Select Specialty --': 
                    $('#Specialtyframe').attr('src','Specialty.html');
                    break; 
                ; 
           }


        });
    });

</script>

如果没有将您的非工作代码作为“工作”示例发布在某处，很难知道这是否会工作；但试一试。也许您可以在某个地方发布一个示例，以便我们看一下？

Answer 2

好的，我已将您的代码移植到我的机器上并进行了试用，它在 FF 3.5.7 中对我来说运行良好。我认为正在发生的事情是您安装了某种插件，干扰了您正在尝试做的事情。

如果我是你，我会开始禁用我所有的插件，重新启动 Firefox，看看是否有效。如果是这样，请开始重新启用您的插件，直到您的应用失败，然后您至少会知道是哪个插件导致了问题。

同时签入Tools > Options > Applications 并检查哪些 PDF 文件设置为打开。我的设置为在浏览器外部的 Acrobat 中打开，这意味着您的脚本无法立即为我工作；我必须设置 FF 才能在浏览器中打开它才能正常工作。

Answer 3

我认为您的问题在于 iframe 中的宽度和高度属性。在 HTML 中不要将“px”添加到宽度和高度值，只在 CSS 中添加。

<iframe id="Specialtyframe" name="Specialtyframe" frameborder="0" width="650px" height="500px" src="Specialty.html">

改成

<iframe id="Specialtyframe" name="Specialtyframe" frameborder="0" width="650" height="500" src="Specialty.html">

试一试，或许能解决你的问题。

Answer 4

PDF 在浏览器中的加载方式（IFRAME 与否）取决于：

• 已安装 PDF 客户端（ADOBE PDF 阅读器、SumatraPDF 等）
• 它的版本，
• 浏览器，
• 用户选择的配置（有些选择在浏览器中打开，有些选择提供下载）。

我建议你从另一个角度来处理这个问题：

1.在 IFRAME 中使用 Google Docs PDF 阅读器

// as easy as:  
$('#Specialtyframe').attr('src', 'http://docs.google.com/viewer?url=http://yourdomain.com/PDF/SpecialityGuidelines/SPECIALTY-cardiology.pdf');

同时检查this SO question

2。将 PDF 转换为平面图像以供预览

我过去曾使用这种方法来显示 PDF 的缩略图。
就我而言，我使用的是ABCpdf（带有链接许可证免费）

Doc theDoc = new Doc();
theDoc.Read(Server.MapPath("../PDF/SpecialityGuidelines/SPECIALTY-cardiology.pdf"));

theDoc.Rendering.DotsPerInch = 36;

for (int i = 0; i < theDoc.PageCount; i++) {
  theDoc.PageNumber = i;
  theDoc.Rect.String = theDoc.CropBox.String;
  theDoc.Rendering.Save(Server.MapPath("cardio_p" + i.ToString() +".png"));
}

然后使用图片进行预览并提供下载 PDF 的选项。