【发布时间】:2013-07-18 16:40:37
【问题描述】:
从 PhoneGap 访问 iOS 中的 iframe
我很难让 PhoneGap(2.9.0) 访问 iOS (6.0.1) 上的 iframe。
应用程序的 index.html 包含一个 iframe 和一个函数,用于检查我是否可以在框架加载后读取框架的内容。
应用程序 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width, height=device-height,
target-densitydpi=device-dpi" />
<script type="text/javascript" charset="utf-8" src="./phonegap.js"></script>
<title>Test</title>
</head>
<body style="background-color: #000;">
<iframe name="framewrap" id="framewrap"
style="border:0;position: absolute; top: 0;
left: 0;width: 100%; height:100%; background-color: #fff;"
src="http://www.somedomain.de/somepath/index.html">
</iframe>
<script type="text/javascript">
window.setTimeout(go, 2000);
function go(){
iframe = document.getElementById('framewrap');
innerDoc = iframe.contentWindow;
alert(innerDoc.document.getElementById('canvas'));
}
</script>
</body>
</html>
iframe 内的文档:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
alert('iframe loaded');
</script>
<title>test</title>
</head>
<body style="margin:0;">
<canvas id="canvas" style="position: absolute; top:0; left:0;">
<p>Your browser does not support the canvas element.</p>
</canvas>
</body>
</html>
会发生什么:
如果我构建应用程序并在 Android(4.2.2) 上运行它,框架已加载,一个警报告诉我 iframe loaded,另一个警报对话框弹出告诉我有一个 HTMLCanvasElement。
但是,如果我在 iPod Touch 上打开应用程序,我只会收到一个警告对话框,告诉我 "null"。
没有 iframe loaded 警报表明 iframe 根本没有加载。
我已经尝试了很多方法来使其正常工作,但都失败了,而且由于我没有 Mac,我无法正确调试。 -thx 苹果-
我的怀疑:
与应用程序捆绑的html文件作为文件执行并使用file协议。 iframe 使用httpprotocol。因此,同源策略生效,我无法访问 iframe。
为什么我不确定:
但这意味着跨平台的行为不一致,因为它适用于 Android。所以我并不完全相信我的怀疑是正确的。
此外,缺少iframe loaded 警报将暗示同源策略不是问题,因为至少框架应该像在桌面上那样加载,其中同源策略只会阻止画布警报显示。
因此:
我的怀疑正确吗?
有没有办法让它跨平台工作?
感谢您的任何建议,希望有人可以帮助我。
感谢您抽出宝贵时间阅读!
【问题讨论】:
标签: ios html iframe cordova same-origin-policy