iFrames not loading on mobile or tablet

Viewed 38110

I haven't been able to find an answer that works. I have an iframe (yes, I have to use an iframe on this occasion) that works fine on PC, but won't load on mobile or tablet at all.

There is some Javascript on the page but removing it doesn't fix the problem. I have also tried changing the iframe height and width from percentages to fixed values. I have also tried removing all attributes from the iframe other than src and it still doesn't load anything in the iframe.

Below is a simplified version of my page, using what I have been able to find from other suggestions.

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
     <meta content='width=device-width, initial-scale=1.0' name='viewport'>
     <style type="text/css">
                body, html
                {
                    margin: 0; padding: 0; height: 100%; overflow: hidden;  -webkit-backface-visibility: visible;
                }

                #content
                {
                    position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
                }
            </style>
    </head>
    <body> 

    <script type="text/javascript">
    function onFrameLoad() {
            do stuff
    };
    </script>

    <div id="content">
    <iframe onload="onFrameLoad(this)" id="app" src="https://subdomain.mydomain.com" frameborder="0" height="100%" width="100%"></iframe>
    </div>
    </body>
    </html>

Can anyone tell me why it isn't working on mobile? Thanks

UPDATE: Clearing the browser cache on tablet fixed it for that, but doing the same on mobile didn't do anything. I also tried using my friend's iPhone (they have never visited the site before) and it didn't load.

The URL I am trying to display in the iframe works in iframes on demo sites like w3schools on my mobile so it's not an x-frame options or browser not allowing any iframes problem (though the x-frame options would stop it working on all devices, but I've checked everything I can think of)

I can provide a live example URL via message if required.

4 Answers

It's 2019 now, as of testing with mobile safari and chrome, no matter the host page uses http or https, the iframe url must use https. http iframe don't load at all.

Might not link to the question , but :

my iframe closed as soon as opened , when I was using https://localhost to test on my android phone,

The issue was that mobile browser doesn't trust the ssl cert i used because it was a development ssl cert. I found out by inspecting the network debug tool , see image below:

Invalid cert

Related