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)
高度无法最大化的问题–两个步骤:
1.ion-content属性里添加scroll="true" overflow-scroll="true"
2.iframe的style里添加min-height: 100%
二、使用实例:
html:
<ion-view view-title="demo">
<ion-content scroll="true" overflow-scroll="true">
<iframe data-tap-disabled="true" ng-src="{{paySrc}}" style="min-width:100%;min-height:100%;">
</iframe>
</ion-content>
</ion-view>
var app = angular.module('myApp', ['ionic']);
app.controller('myCtrl',function($scope, $http, $sce) {
//iframe中的链接不能直接指定
//$scope.paySrc = 'http://www.gongjuji.net';
$scope.paySrc = $sce.trustAsResourceUrl('http://www.gongjuji.net');;
});
2.ionic ios iframe 白屏问题
在ios下边使用iframe出现白屏问题
android下边正常
原因是ios对app打开外部网页有限制需要取消限制
解决方法
1.确认添加whitelist 插件
2.在config.xml中添加
<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.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';">