Firefox having trouble with iFrame loading

Question

Hey everyone,

I'm having a weird issue with Firefox and loading of a PDF inside an iframe. Here is what the pages does. - Select an item from a drop down list - Load PDF inside a iframe based on the selection.

All other browsers work fine except FF. One a select an item to load the status in the lower left corner says 'STOPPED'. I fired up Firebug and there's no HTTP action. It's like everything gets halted.

Here is the catch. When I popup the DIV box I can load the PDF in FF by making a selection in the drop down list. Once I close the div it doesn't load.

Here is the jQuery to load the PDF

<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> 

Any ideas?

Answer 1

I think your problem is with the width and height properties in your iframe. When in HTML don't add the "px" to width and height values, only add those when in CSS.

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

Change to

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

Give it a try, might fix your problem.

Answer 2

Interesting approach. Why don't you try just manipulating the src attribute of your iframe like so?

<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>

It's difficult to know if this will work without your non-working code posted somewhere as a "working" example; but give it a try. Maybe you could post an example somewhere so we can take a look at it?

Answer 3

Okay, I've transplanted your code onto my machine and tried it out and it works fine for me in FF 3.5.7. What I think is happening is that you have some kind of addon installed that is interfering with what you're trying to do.

If I were you I'd start my disabling all my addons, restart firefox and see if that works. If it does, start reenabling your addons until your app fails and then you'll at least know which addon is causing the problem.

Also check in Tools > Options > Applications and check what PDF files are set to open in. Mine is set to open in Acrobat external to the browser, which means that your script didn't work for me immediately; I had to set FF to open it in the browser to get it working.

Answer 4

The way a PDF is loaded in a browser (IFRAME or not) will depend on:

• the PDF client installed (ADOBE PDF reader, SumatraPDF, etc)
• the version of it,
• the browser,
• the configuration the user have selected (some select to open in the browser, other to offer download).

I suggest you to handle the problem from other point of view:

1. Using Google Docs PDF reader inside the IFRAME

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

Also check this SO question

2. Converting the PDF to flat images for preview

I have used this approach in the past to show thumbnails of PDF.
In my case I was using ABCpdf (Free with a link license)

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"));
}

and then use the image for preview and offer the option to download the PDF.