How to embed pdf within an iframe with height exactly one page? – WordPress

The following answer does NOT work:

=====

This may not be practical for you, but this is how I guarantee that only one page of a pdf is displayed in an .

Give your a class–I use "x85x110" for 8.5" x 11" paper and use the following CSS:

iframe.x85x110 { height:calc(103% * (8.5 / 11)); }

The "103%" is a fudge factor that you can change to get exactly the height you want, i.e., to get just a hair of the blank space between one page and the next. The white-space on either side of the "*" and "/" is critical–calc won’t work without it.

=====

This answer, however, DOES work:

=====

First the CSS:

iframe.x85x110 { width:80%; }

Second, the HTML:

<iframe class="x85x110" src="A Boy And His Dog/docs/Downunder Expansion - 8.5 x 11 - 10pt.pdf"></iframe>

Third, the javascript:

<script type="text/javascript" >

    x85x110();
    window.addEventListener('resize', x85x110);
    
    function x85x110()
    {
        array_x85x110 = document.getElementsByClassName("x85x110");
        
        for (count=0; count<array_x85x110.length; count++)
        {
            array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";
            
        } // for (count=0; count<array_x85x110.length; count++)
    } // function x85x110()

Fourth, the explanation:

Give your <iframe> a class name, I used x85x110 because my documents are 8.5" x 11".

I use width:80% because I want the frame to be 80% of the width of the column width in which the .pdf and its containing <iframe> lives–this is NOT necessary.

The x85x110(); calls the function x85x110() when the page loads.

The window.addEventListener('resize', x85x110); calls the x85x110() function whenever the page is resized.

The array_x85x110 = document.getElementsByClassName("x85x110"); collects all of the <iframe> elements of the class x85x110 in an array named array_x85x110.

Then, for each element of array_x85x110, i.e., for each <iframe> of the class x85x110, we loop using the for (count=0; count<array_x85x110.length; count++) {} and set the height of the <iframe> to (11.0 /8.5) times the offsetWidth of the <iframe> with the the:

array_x85x110[count].style.height = Math.round(array_x85x110[count].offsetWidth * (11.0 / 8.5)) + "px";

Math.round() rounds the resizing of the <iframe>‘s height to the nearest pixel.

The (11.0 / 8.5) divides the <iframe>‘s .offsetWidth by 8.5 (the width of my pdf page in inches), which changes as the browser window is resized, and multiplies by 11 (the height of my pdf page in inches), to maintain the pdf’s natural aspect ratio.

If for some bizarre reason you’re using A4 paper, you European wierdo :-), the (11.0 / 8.5) would be (11.69 / 8.27), i.e., the height of a piece of A4 paper divided by its width.)

=====

You can see this CSS at work, for real now at my board game design page.

Sorry for the confusion.