Android 浏览器上的 iframe 问题答案

【问题标题】：iframe on Android browser issueAndroid 浏览器上的 iframe 问题
【发布时间】：2014-02-16 15:35:51
【问题描述】：

http://fc.wx198.cn/ideaidev/wxsite/14/index.html

我有这个网页在 Android 上运行。

我的手机是 Nexus 4 和 Android 4.4。

该网页在我的手机和 iPhone 浏览器上完全没问题。

但是当我的同事在他们的手机（Android 4.1/4.2 等）上打开该页面时

4.4以下版本的所有安卓手机。

您可以看到该页面中有一个 iframe。那个 iframe 没有显示！

我就是不知道为什么。请帮忙。

【问题讨论】：

我已经在我的电脑和手机上测试了你的链接。 iframe 完全可见。手机运行android 2.3/
你能在 android 4.1/4.2 上测试吗？
真的，使用 4.1.2 平板时看不到 iframe。尝试为 iframe 设置背景颜色以查看它是否完全消失或只是页面未加载。
@Valentin 我刚刚在 iframe 上设置了背景颜色。在 android 4.1/4.2 上也没有显示
所以，这可能意味着 android 15-17 中的浏览器不支持 iframe 标签。

标签： android iframe

【解决方案1】：

我做了一些搜索，似乎 android 4.1/4.2 不支持内置浏览器中的 iframe 标签。您可以使用 javascript 和 XMLHttpRequest 来克服这个障碍。

为您的“iframe”文档创建容器，然后在此容器中发出请求并放置响应。不幸的是，XMLHttpRequest 只能加载同域的页面。

假设您在 HTML 中有 ID 为 my-iframe 的 div，加载 example.com/frame.html 内容的 js 代码可能是这样的：

var r = new XMLHttpRequest();
r.addEventListener("load", function(){
    document.getElementById("my-iframe").innerHTML = this.responseText;
});
r.open("get", "example.com/frame.html", true);
r.send();

编辑：固定语法

【讨论】：

这是一个非常有趣的解决方案。在 Phonegap 中，您可以 XHR 访问的页面没有限制 - 因此它可以用作 iframe 替换。小心跨站脚本！
绝对是一个有趣的方法。我为你 +1 只是因为这是一个很酷的概念。如果您正在加载的 iframe 是 html5 视频，请不要认为它会播放得很好，但正常的 html 内容应该可以正常加载。