View Full Version : possible workaround for pdf viewer under iframe

11 Feb 2011, 5:11 PM
Just got an idea for pdf viewer under iframe.
The workaround is actually quite simple.
Create an iframe with link to pdf file.
overlay a mask layer on top of the iframe as listener.
The scrolling should works by default.

var panel = new Ext.Panel({
title: 'panel',
html: '<div style="position:relative"><iframe id="iframe" width="1" height="1" src="file.pdf"></iframe><div id="mask" style="position:absolute; top:0; left:0;"></div></div>',
scroll: 'both',
layout: 'fit',
dockedItems: [
xtype: 'toolbar',
title: 'PDFView'

if(Ext.getCmp('panel')) {
var x=document.getElementById('iframe');
var m=document.getElementById('mask');
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
var h = y.body.offsetHeight;
var w = y.body.offsetWidth;
x.style.height = h;
x.style.width = w;
m.style.height = h;
m.style.width = w;

For pinch zoom, a function can be added to the listener and change the width of the iframe.

28 Mar 2011, 2:20 PM
This looks really great - did you ever get the pinch zoom working?

Question though: I think you may need to expand your example a bit because I can't get your code to work as-is. I get the error 'Cannot read property "contentWindow" of null'. I assume that everything in your if statement is supposed to go in a listener function... but don't see quite how to implement it.

Looks like something I really need, though!

29 Mar 2011, 12:07 PM
This is basically how I did it when faced with this problem. My code sample is here. (http://stackoverflow.com/questions/5267996/how-to-properly-display-an-iframe-in-mobile-safari/5359546#5359546) I haven't added pinch yet but it should be do-able.

1 Apr 2011, 1:59 AM
i want to display multipage pdf in iphone by clicking on the item of the list.I tried it using iframes but only a portion of pdf is viewed in the iphone simulator.Can somebody help me out.

16 Aug 2011, 5:45 AM
I have a pdf document displayed within an iframe in a panel but I am not able to see scrollbars in the div at all.
I tried the example posted here but it doesnt work for me, has anyone being able to do this successfully?