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