Cordova iOS 6.2.0本地iFrame无法通过file://协议加载问题咨询

方案1：使用本地HTTP服务插件（优先推荐，兼容性最好） #

该方案通过在应用内启动轻量本地HTTP服务，将打包到本地的iFrame资源通过http协议暴露，完全匹配Web端资源加载逻辑，无file协议的跨域、权限限制，支持所有类型的静态iFrame资源，全程离线运行。

• 安装Cordova官方维护的HTTP服务插件：
  cordova plugin add cordova-plugin-httpd
• 资源部署：将所有iFrame相关静态资源放入Cordova项目的www/iframe_assets目录，打包时会自动封装到应用沙箱内
• 服务初始化与iFrame加载示例代码：

document.addEventListener('deviceready', function() {
  const localHttpd = cordova.plugins.CorHttpd;
  // 启动本地服务，仅允许本地环回访问，避免安全风险
  localHttpd.startServer({
    www_root: 'www/iframe_assets',
    port: 18080,
    localhost_only: true
  }, function(serviceUrl) {
    // 服务启动成功后赋值iFrame地址，例如加载assets下的demo.html
    document.getElementById('target-iframe').src = serviceUrl + '/demo.html';
  }, function(err) {
    console.error('本地服务启动失败：', err);
  });
}, false);

• 可选优化：应用退到后台时调用localHttpd.stopServer()释放端口资源，回到前台时重新启动即可

方案2：配置WebView权限放开file协议限制（适合轻量场景） #

如果iFrame资源逻辑简单、无严格跨域校验，可以通过修改Cordova配置直接放开file协议访问限制，不需要启动额外服务：

1. 在项目根目录的config.xml中添加如下配置项：

<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />
<allow-navigation href="file://*" />

2. 确认iFrame内部所有资源引用均使用相对路径，不要写绝对路径或线上地址

注意：该方案仅支持iOS 11及以上系统，部分对跨源校验严格的iFrame资源可能依然加载失败，兼容性弱于本地HTTP服务方案

常见问题排查 #

• 本地服务启动提示端口占用：更换端口号即可，建议使用10000以上的非知名端口
• iFrame加载报404：检查资源是否正确打包到应用沙箱的www/iframe_assets目录下，路径拼写是否正确
• 父子页面跨域报错：本地HTTP服务场景下父子页面均使用http://localhost域名，只需设置两者的document.domain一致即可解决跨域通信问题

内容的提问来源于stack exchange，提问作者Ryan Peterson