I created a page on my website eagleware.net that contains a simple control you can view with various browsers and test an ASPxPopupControl over a PDF with various settings and with the video embedded into the page as an <iframe>, <embed>, <object> or using Google Docs.
The following short video shows my page control on my website and how to use it. A previous article DevExpress ASPxMenu - Display dropdown menus over a PDF object uses the same code behind techniques and provides code for determining which way to load a dynamic PDF into a page based on the viewing browser.
ASPxPopupControl Display over a PDF File
Example 1 – DevExpress v11.1.7 ASPxPopupControl
Saturday, July 25, 2010 - It’s a recurring problem trying to display anything over an embedded PDF file. PDF’s by default are rendered on top of everything else on the screen and different browsers, operating systems, 3rd party programming controls, etc all interact differently with varying results in attempting to render a page element over a PDF.
Recently to this date, Adobe Acrobat and/or Firefox (v 3.6.6, 3.6.7, 3.6.8) have had updates that caused Firefox especially difficult problems in achieving the rendering of a page element over a PDF.
This Example shows how the ASPxPopupControl used 3 different ways displays over a PDF depending on which browser is viewing the page.
Wednesday, Oct 3, 2011 – Updated for current generation of browsers and DevExpress v11.1.7
| Browser | PDF Inserted With | ASPxPopupControl Display over PDF Settings 1 | ASPxPopupControl Display over PDF Settings 2 | ASPxPopupControl Display over PDF Settings 3 |
| IE 8 | I Frame | NO | YES | YES |
| | Embed | NO | YES | YES |
| | Object | NO | YES | YES |
| | GoogleDocs | N/A | N/A | N/A |
| | ||||
| IE 9 | I Frame | NO | YES | YES |
| | Embed | NO | YES – NO if PDF has focus | YES – NO if PDF has focus |
| | Object | NO | YES – NO if PDF has focus | YES – NO if PDF has focus |
| | GoogleDocs | N/A | N/A | N/A |
| | ||||
| Chrome 5 | I Frame | NO | NO | YES |
| | Embed | NO | YES | YES |
| | Object | NO | YES | YES |
| | GoogleDocs | YES | YES | YES |
| | ||||
| Chrome | I Frame | YES | YES | YES |
| 12.0, 14 | Embed | YES | YES | YES |
| | Object | YES | YES | YES |
| | GoogleDocs | YES | YES | YES |
| | | | | |
| Firefox 3.6.6 | I Frame | NO | NO | YES |
| 3.6.7, 3.6.8 | Embed | NO | NO | YES |
| 5, 7 | Object | NO | NO | YES |
| | GoogleDocs | YES | YES | YES |
| | ||||
| | ||||
| Opera 10.6 | I Frame | NO | NO | NO |
| | Embed | NO | NO | NO |
| | Object | NO | NO | NO |
| | GoogleDocs | YES | YES | YES |
| | ||||
| Opera 11.5 | I Frame | YES | YES | YES |
| | Embed | YES | YES | YES |
| | Object | YES | YES | YES |
| | GoogleDocs | YES | YES | YES |
| | ||||
| Safari 5 | I Frame | NO | NO | NO |
| | Embed | NO | NO | NO |
| | Object | NO | NO | NO |
| | GoogleDocs | YES | YES | YES |
| |
ASPxPopupControl Settings 1: Normal default settings.
ASPxPopupControl Settings 2: RenderIFrameForPopupElements="True"
ASPxPopupControl Settings 3: RenderIFrameForPopupElements="True", ShowHeader="False" & popup contents placed in asp Panel control.
PDF Insert Code:
- Iframe: <iframe src="pdfFilename" width="100%" height="1210" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
- Embed: <embed src="pdfFilename" width="100%" height="1210" parem="name" value="opaque"></embed>
- Object (w/menus): <object data="pdfFilename" type="application/pdf" width="100%" height="1210"></object>
- Object (w/out menus): <object data="pdfFilename#toolbar=0&navpanes=0" type="application/pdf" width="100%" height="1210"></object>
- GoogleDocs: <iframe id="if_google" runat="server" src= "http://docs.google.com/gview?url=pdfFilename&embedded=true" width="100%" height="1210" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
Note about using Google Docs to display your PDF: The PDF must reside on the web already. Code is erratic in IE causing script errors and timeouts. In the developer environment if the <iframe> src is set it will generate script errors if compiling with IE as your browser. Check on page load for browser type and set the <iframe> src if NOT “IE”. Using Google Docs to display PDF’s works in all other major browsers.
Looking at the chart you might think Google Docs is an easy way to go however it is not compatible with Internet Explorer with default settings. Since about 80% of your users are using IE and the fact that 95% of them will not know how to reset their IE browsers security settings to display a Google Document I don’t recommend it. Also a Google Docs PDF may be of a lower resolution and may not be acceptable to your requirements. I suggest checking for browser type on page load and displaying the PDF as an <iframe> for IE, Chrome & Opera (with ASPxPopupcontrol set to RenderIFrameForPopupElements="True") and using Google Docs for Safari and Firefox.
A previous article DevExpress ASPxMenu - Display dropdown menus over a PDF object uses the same code behind techniques and provides code for determining which way to load a dynamic PDF into a page based on the viewing browser.
0 comments:
Post a Comment