Ionic App中嵌入外部网页的问题

在app中不可避免的要引用第三方的页面,那么在Ionic中是如何实现呢?

1.设计引用外部页面的html框架页面,分3部分,表头有2个按钮,中间是引用的页面,底部隐藏分享相关按钮,具体页面如下:

<ion-view title="{{title}}" >

    <ion-nav-buttons side="left">
      <a class="button button-icon ion-ios-arrow-back" ng-click="toClose()"></a>
    </ion-nav-buttons>

    <ion-nav-buttons side="right">
      <button class="button button-icon icon ion-android-share-alt" ng-disabled="showShare" ng-click="share()"></button>
    </ion-nav-buttons>

    <ion-content >
        <iframe id="extendIf" name="extendIf" ng-src="{{::plink}}" allowtransparency="true" allowfullscreen="true" 
        allowfullscreenInteractive="true" border="0" frameborder="0" style="100%;height:100%;">
</iframe> </ion-content> <div class="bar bar-footer "> <button class="button button-icon ion-ios-arrow-left" ng-click="hisGo(-1)" ng-disabled="hasBack" ></button> <button class="button button-icon ion-ios-arrow-right" ng-click="hisGo(1)" ng-disabled="hasForward"></button> <button class="button button-icon ion-ios-loop" ng-click="hisGo(0)"></button> </div> </ion-view>

  主要还是使用了iframe标签。

2.设计对应的Controller层,接收用户的调用,代码如下:

angular.module("ionicApp.controllers")
.controller("OuterHtmlFrameController",function($scope, $stateParams, $interval)
{
	function toCheck()
  	{
  		    var o = $interval(function()
  		    {
  			        var frame = $("#extendIf").contents();
  			        $scope.title = frame.find("title").text();
  			        $scope.showShare = false;
  			        $scope.title && $interval.cancel(o);
  		    }, 100);
  	}
  	try
  	{
  		    $scope.plink = $stateParams.link;
  		    $scope.hasBack = 0;
  		    $scope.hasForward = 0;
  		    toCheck();
  		    $("#extendIf").load(function()
  		          {
  			              toCheck();
  			              $(this).contents().find("[target='_blank']").attr("target", "_self");
  		          });

  		    $scope.hisGo = function(e)
  		    {
  		          //.....
  		    };

  		    $scope.share = function()
  		    {
  			 //.....
  		    };
  	}
  	catch (r)
  	{
  		          $scope.hideLoad();
  		          console.log(r);
  	}
});

  

3.调用外部页面

$state.transitionTo("outerHtmlFrame", { link: "http:baidu.com" });// outerHtmlFrame为路由标记名
原文地址:https://www.cnblogs.com/crazyguo/p/6002847.html