Ionic是單頁應(yīng)用，有時候需要處理外網(wǎng)頁面，可以使用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里，調(diào)用$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出現(xiàn)白屏問題
android下邊正常
原因是ios對app打開外部網(wǎng)頁有限制需要取消限制
解決方法
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';">
