Menu
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.
407
Embedding project via iframe does not work on tablet or smartphone – InVision Support.
If the primary domain for your website is secure with SSL (https://) but the source URL for your Iframe is not, your website will display an error, or simply not display the content. To fix this, you'll need to update the Source URL for your Iframe content with the secure (https://) version.
You have to check for HTTP response header X-Frame-Option of those sites. if its value is "DENY or SAMEORIGIN", then you can not load those website in the iframes. DENY = No one can load the website in iframe. Even the same domain page wont be able to load.
If the remote url is not https, or forwards to a non-https url, it will be blocked (by the browser) from displaying in the iframe. If the remote site is indeed https, but contains at least one resource served by http (instead of https), the browser will block the iframe due to mixed content.
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.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
