Why doesn’t the PDF in the iframe display the same in all supported browsers?

  • Hello,

    I wanted the page to have an embedded PDF. WordPress can do this by itself and inserts it using the <object> element. The problem is that the site is https, but the path to the files is http, which causes the problem of mixed content and pdf is only displayed in Firefox (probably some built-in extension).

    The domain is set to Redirection to HTTPS: Enabled and deals with mixed content. Still, it doesn’t work in this case. So I tried to add it using an <iframe>.

    <iframe src="url" width="100%" height="750px"></iframe>

    It is already displayed in browsers, but it causes other problems.

    1. In each browser, the built-in window with the PDF file is displayed differently – the toolbar is different. Does it depend purely on the browser and can’t affect it?

    2. What defines the maximum height of the window. If I put the height at 100%, it will only appear as “small noodles” and I haven’t figured out which element is causing it.

    3. Why doesn’t it appear in Android browsers (those that support the <iframe> element) and only a file download window pops up?

    Please help

    Thank zou

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • PDF display in browsers is handled by each browser independently, using their own homegrown or 3rd-party code, as this is not part of the HTML spec.

    Firefox uses PDF.js, and if I remember correctly, Chrome (and perhaps other Chromium-based browsers, where supported) use pdfium.

    So inconsistencies out to be expected.

    The only way to enforce rendering consistency in all browsers is to do the rendering server-side, bundle your own JS PDF renderer, or use a 3rd-party rendering service.

    As to your original problem…

    The problem is that the site is https, but the path to the files is http, which causes the problem of mixed content and pdf is only displayed in Firefox (probably some built-in extension).

    The domain is set to Redirection to HTTPS: Enabled and deals with mixed content. Still, it doesn’t work in this case.

    If I understand you correctly,

    — The domain hosting the PDF file supports HTTPS
    — But, somehow, you’re giving an HTTP link to the PDF file to WordPress
    — And you’re relying on the server’s HTTP => HTTPS redirection to fix this
    — Which, somehow, isn’t working for the PDF file, hence the mixed content issue.

    Where I’m totally lost is, why aren’t you able to give WordPress the direct HTTPS link to the PDF file, to begin with, which should solve your original problem?

    Or am I misunderstanding your original problem?

    Thread Starter michalrama

    (@michalrama)

    @gappiah

    I apologize for the late reply. However, thanks to this I can say that the warning mixed content is no longer displayed and I have no idea why and I don’t have time to find out.

    In any case

    1. If it depends purely on the browser, there is no point in dealing with it.

    2. I’ve already solved it. In the paragraph containing the iframe (code in question), I set the pdf class. Then I added JS code. $(".pdf").css("height", window.screen.availHeight / 2);

    3. The PDF does not display browsers that support the <iframe>, so the problem is elsewhere. But I have no idea where. Don’t know, please?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Why doesn’t the PDF in the iframe display the same in all supported browsers?’ is closed to new replies.