Seeking a more robust Iframe code for displaying PDF

Topics: Controls
Jan 16, 2012 at 8:00 PM

Hi All!

I created an extension to display PDF files on my posts. When I create a post, attach a pdf file on the post and leave the post empty but the attachment, then my extension displays the PDF in view mode. It works until I enable the FacebookLike button.

On a post without an attachment (my extension is skipped), the FacebookLike button is displayed. On a post with an attachment, the PDF is displayed but the FacebooLike button disappears. You get one or the other but not both.

Here is a snippet of my extension:

        private void PostServing(object sender, ServingEventArgs e)
        {
            if (e.Body.Contains(".pdf"))
            {
                string path = e.Body.Substring(e.Body.IndexOf("file.axd?", 0));
                path = path.Substring(0, path.IndexOf("pdf", 0) + 3);

                StringBuilder sb = new StringBuilder();
                sb.AppendLine("<div class=\"ShowPDF\">");
                sb.Append("<iframe src='" + path + "' ");
                sb.Append("width='900px' height='1175px' frameborder='1' style='frameborder=1;overflow-y:hidden;width=900px;height=1175px' ");
                sb.Append("allowTransparency='true' </iframe>");
                sb.AppendLine("<br/>");
                sb.AppendLine("</div>");
                e.Body = sb.ToString();
            }
        }

Thanks!

Coordinator
Jan 16, 2012 at 10:45 PM

Have you looked at HTML output in both cases, working and not? Also, "file.axd" seems like a risky position pointer, better use something like "[pdf:thepdffile.pdf]".

Jan 16, 2012 at 11:42 PM

Working (FacebookLike shows):

<div class="text">
[No text]
<div class="FacebookLike">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:450px; height:80px;" src="http://www.facebook.com/plugins/like.php?href=http://localhost:52457/BlogEngine.NET/post/2009/01/15/Test.aspx&layout=standard&show_faces=&width=&action=like&font&colorscheme=light&height=80">
</div>
</div>

 

NOT working (FacebookLike does not show):

<div class="text">
<div class="ShowPDF">
<iframe width="900px" height="1175px" frameborder="1" iframe="" <="" allowtransparency="true" style="frameborder=1;overflow-y:hidden;width=900px;height=1175px" src="file.axd?file=2012%2f1%2fCover(1).pdf">
</div>
</div>

You can see that the entire <div> is missing. Is there something I need to learn about how the style.css is applied. I know that the theme is selected on the fly. Does it mean that the style.css is applied by the core on the fly? I am using the standard theme and I modified my blog to not show the side panel on pages and posts. This way the PDF will take the entire width of the blog.

Thanks!

Coordinator
Jan 17, 2012 at 1:47 AM

If you have "div" missing, style probably won't make a difference. You need to find out why that "div" gets removed. You can either step through debugger if you are using VS or you'll have to output results to the page verifying step by step that it matches what you expect it to be.

Jan 17, 2012 at 2:12 AM

<div class="ShowPDF">
<iframe src='file.axd?file=2012%2f1%2fCover(1).pdf' width='900px' height='1175px' frameborder='1' style='frameborder=1;overflow-y:hidden;width=900px;height=1175px' allowTransparency='true' </iframe><br/>
</div>
<div class="FacebookLike">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://localhost:52457/BlogEngine.NET/post/2012/01/01/Jan-2012-Page-1.aspx&amp;layout=standard&amp;show_faces=&amp;width=&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div>

The above is the value of e.Body at the very end of FacebookLike extension. So we know the extensions are working. What the stylesheet is doing is amother question though. How does one go about profiling the stylesheet?

Coordinator
Jan 17, 2012 at 2:34 AM

To profile stylesheet you can use FireBug extension for FireFox, it'll show you if stylesheet is loaded, what styles are used for any element and lots more. There is "light" version for Chrome and for IE dev tools (F12) with similar functionality. Not as good as FireBug IMO, but cover basics.

Jan 17, 2012 at 7:06 AM

<meta http-equiv="X-UA-Compatible" content="IE=8" />

By adding this to the site.master page I was able to fix the issue on IE. It seems that IE9 broke Iframe.

Now what is the fix for Firefox?

I think I'm just prolonging my agony. There's gotta be a better way to display PDF w/o Iframe. Like the extension by http://johndyer.name/ for video.

Thank you rtur for the help.

Jan 17, 2012 at 6:04 PM
Edited Jan 18, 2012 at 12:51 AM

Here is the final solution. No need to deal with Iframe. No need to add metadata to the header. Works with Firefox, IE8 and IE9.

 

        private void PostServing(object sender, ServingEventArgs e)
        {
            if (e.Body.Contains(".pdf"))
            {
                string path = e.Body.Substring(e.Body.IndexOf("file.axd?", 0));
                path = path.Substring(0, path.IndexOf("pdf", 0) + 3);

                StringBuilder sb = new StringBuilder();
                sb.AppendLine("<div style='width:900px; height=1175px' class=\"ShowPDF\">");
                sb.Append("<embed width='900px' height='1175px' border='1px' name='plugin' src='" + path + "' type='application/pdf'>");
                sb.AppendLine("</div>");
                e.Body = sb.ToString();
            }
        }

Coordinator
Jan 17, 2012 at 10:38 PM

Cool, thanks for sharing, might help someone else.