iFrame未在手机或平板电脑上加载 [英] iFrames not loading on mobile or tablet
问题描述
我一直无法找到有效的答案。我有一个iframe（是的，我必须在这种情况下使用iframe）在PC上工作正常，但根本不会在手机或平板电脑上加载。
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.
页面上有一些Javascript但删除它并不能解决问题。我也尝试将iframe的高度和宽度从百分比更改为固定值。我还尝试删除iframe以外的所有属性而不是 src ，它仍然没有在iframe中加载任何内容。
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
更新：清除平板电脑上的浏览器缓存会为此修复此问题，但在移动设备上执行相同操作并未执行任何操作。我也试过使用我朋友的iPhone（他们以前从未访问过该网站）并且没有加载。
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.
我试图在iframe中显示的URL工作在在我的手机上的w3schools等演示网站上的iframe所以它不是 x-frame选项或浏览器不允许任何iframe问题（尽管x-frame选项会阻止它在所有设备，但我已经检查了我能想到的一切）
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.
推荐答案
问题就像我所怀疑的那样 - iframe的URL调用了一些不安全的元素，移动设备和平板电脑上的某些浏览器（桌面上的Firefox）没有显示任何内容如果内容在安全和非安全之间混合（我的域名都是https）。
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).
现在已修复这些内容并安全地托管/调用所有内容，清除缓存完全重新加载页面即使在移动浏览器上也能解决问题s。
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.
它在平板电脑上工作而不是移动电话的原因完全取决于时间和不同元素https链接被破坏（重定向到http）以及何时缓存了不同的页面。
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.
这篇关于iFrame未在手机或平板电脑上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
