版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011127019/article/details/55258662
一、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%
二、使用实例:
<ion-content>
<iframe data-tap-disabled="true" style="height:100%;width:100%;" ng-src="{{paySrc}}"></iframe>
</ion-content>
js代码
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');;
});
显示结果:
更多:
Cordova页面解析页面中script标签内容失败,Refused to execute inline script because it violates the followi