【转】ionic调用外部网页

---

ionic调用外部网页示例

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';">

参考地址