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中添加

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

             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

你可能感兴趣的:(iOS ionic使用iframe嵌入外部页面整理)