iFrames not loading on mobile or tablet

Question

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.

I think I figured it out... The subdomain URLs are being hosted by a third party via CNAME record and they have temporarily 'broken' their SSL certificate while migrating to a new version. I think the android and iphone browsers work the same way as Firefox, and if a secure site is trying to show mixed content it just won't show. If I use a browser I haven't used before then the page doesn't show, but if I use one I already used (even after clearing cache) it shows. They should be finished messing around with it this week apparently, so hopefully that will fix it. — Lyall, Jul 17 '17 at 18:29
Although even after clearing cache on my tablet it still shows the working https version and all is fine... Hmm. Confusing. — Lyall, Jul 17 '17 at 18:34
Are you honoring the Cross-Origin Resource Sharing (CORS) Policy? The iframe content needs to be served with the `Allow-Access-Control-Origin` header set correctly in the response or modern web browsers will block the response to protect the user. — Jake Holzinger, Jul 17 '17 at 22:54
@JakeHolzinger The iFrame correctly displayed on laptop and tablet as well as in third party websites (W3Schools etc.) so yes I think that's ok. — Lyall, Jul 18 '17 at 11:00
Have you checked solution in https://stackoverflow.com/questions/23355179/safari-doesnt-call-iframe-onload-when-src-is-not-valid-site . It seems to be same problem you are facing for iframe. — Ellen, Jul 19 '17 at 11:27
@Ellen thanks but it isn't the same problem. I don't need to check when the iframe is loaded (though I have JavaScript for that as I need to use the text within one of the classes after it has loaded). Even after removing the JavaScript and the onload tag the iframe does not display anything on mobile. — Lyall, Jul 19 '17 at 15:33
I am not an android expert but to find the solution of your problem I have reached out to this[responsive-iframes](http://benmarshall.me/responsive-iframes/) try this may it helps you. — always-a-learner, Jul 21 '17 at 04:30
@SamuelTulach I don't know how to use web console on mobile. There are no errors using developer tools/web console on my laptop. — Lyall, Jul 22 '17 at 15:21
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html — Samuel Tulach, Jul 22 '17 at 17:03

score 7 · Accepted Answer · answered Jul 24 '17 at 17:34

The problem was as I had suspected - the URL of the iframe was calling some unsecured elements and certain browsers on mobile and tablet (and Firefox on desktop) do not display anything if the content is mixed between secure and non-secure (my domain is all https).

Now that those are fixed and everything is hosted/called securely, clearing the cache completely and reloading the page fixes the problem even on mobile browsers.

The reason it was working on tablet and not mobile was purely down to timing and when the different elements https links were broken (redirecting to http instead) and when the different pages were cached.

score 4 · Answer 2 · answered Sep 01 '19 at 02:53

4

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.

answered Sep 01 '19 at 02:53

h--n

5,903
4
31
32

score 0 · Answer 3 · answered Jul 24 '17 at 09:48

I faced a similar issue with iframe and cross-domain access over WebView of iOS. The problem was with Cookie Acceptance which was causing issues.

The problem was the Cookie Security policy (HTTPCookieAcceptPolicy) for UIWebView, which previously defaulted to NSHTTPCookieAcceptPolicyAlways.

But from iOS 7, it got defaulted to NSHTTPCookieAcceptPolicyOnlyFromMainDocumentDomain, breaking my app.

You problem does not look to be same, but might be on the similar lines.

score 0 · Answer 4 · answered Sep 20 '20 at 03:55

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:

iFrames not loading on mobile or tablet

4 Answers4

Linked