iOS ionic使用iframe嵌入外部页面整理

特别说明:

1.目前来说如果iframe中的页面都是当前窗口的话建议使用

2.如果iframe中页面的链接有target='_blank'的就会跳出当前页面,目前没找到好的解决方案,

但是可以使用Cordova插件cordova-plugin-inappbrowser或者cordova-plugin-themeablebrowser 指定独立窗口实例打开。

常遇到问题:

无法访问外部url的问题–两个步骤解决:

1.iframe的src属性用ng-src属性替代,并指明绑定对象:ng-src="{{targetUrl}}"

2.在controller里,调用$sce: $scope.targetUrl = $sce.trustAsResourceUrl(url)

高度无法最大化的问题和iOS无法滚动问题:

/*.page-contract是我的一个页面中的样式*/

.page-contract .scroll-content > .scroll {

    height: 100%;

    -webkit-overflow-scrolling:touch; /*解决iOS下iframe无法滚动*/

    overflow:auto;

}

.page-contract .scroll-content > .scroll > iframe {

    min-width: 100%;

    min-height: 100%;

}

IOS中iframe白屏问题:

1、确认添加whitelist插件

2、在config.xml中添加

<plugin name="cordova-plugin-whitelist" spec="1.3.0" />

<allow-navigation href="*" />

<allow-intent href="*" />

<access origin="*" />

3、在index.html中添加如下代码

<meta http-equiv="Content-Security-Policy" 

             content="default-src *; 

                                style-src * 'self' 'unsafe-inline' 'unsafe-eval';

                                script-src * 'self' 'unsafe-inline' 'unsafe-eval';">

参考链接:

http://www.cnblogs.com/happen-/p/6138712.html

http://blog.csdn.net/u011127019/article/details/55258662

http://blog.csdn.net/renfufei/article/details/37663355

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ionic调用外部网页示例 Ionic是单页应用,有时候需要处理外网页面,可以使用iframe标签 特别说明: 1...
    紫荆逸阅读 6,411评论 0 0
  • 基础问题 = 和 == 和 === 的区别?= : 用于赋值== : 用于判断=== : 用于判断,必须类型和值同...
    雪落丶阅读 4,514评论 0 1
  • 1.基础问题 1. = 和 == 和 === 的区别? = : 用于赋值== : 用于判断=== : 用于判断,必...
    月光在心中阅读 6,957评论 0 6
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 5,002评论 0 4
  • 2017/9/27更新:ios兼容问题:1)input输入框无法输入的问题:ionic.css把-webkit-u...
    一只飞阅读 10,130评论 4 0