在ionic应用中打开外部网站（使用InAppBrowser插件）

最新推荐文章于 2024-08-24 10:10:17 发布

weixin_33795093

最新推荐文章于 2024-08-24 10:10:17 发布

阅读量546

点赞数

文章标签： javascript python 移动开发 ViewUI

原文链接：https://my.oschina.net/uniquejava/blog/525304

版权

2019独角兽企业重金招聘Python工程师标准>>>

在安卓上试了一下，如果直接window.open(url)，在app中点击外部链接没有任何反应。

安装https://github.com/apache/cordova-plugin-inappbrowser
执行命令：
ionic plugin add cordova-plugin-inappbrowser

简而言之，就是用window.cordova.InAppBrowser.open替换window.open

步骤：

1. 在应用程序启动的时候判断window.cordova是否存在如果是重写window.open方法

2. 用ng-click="openLink(story.url)" 替换先前的href

3. 在$scope中定义openLink方法。

4. 连上手机，运行ionic run android测试

文件一： www/index.html

<div class="list">
      <a ng-click="openLink(story.url)" class="item item-thumbnail-left item-text-wrap"
         ng-repeat="story in stories track by story.id">
        <img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith('http')"/>

        <h2>{{story.title}}</h2>

        <p>
          <span am-time-ago="story.created_utc" am-preprocess="unix"></span> - {{story.domain}}
        </p>
      </a>
    </div>

文件二: www/js/app.js

(function () {
  var app = angular.module('myreddit', ['ionic', 'angularMoment']);
  app.controller('RedditCtrl', function ($http, $scope) {
    $scope.stories = [];

    function loadStories(params, callback) { 。。。
    }

    $scope.loadOlderStories = function () {。。。
    }

    $scope.loadNewerStories = function () {。。。
    }

    $scope.openLink = function (url) {
      window.open(url, '_blank');
    }

  });
  app.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
     。。。
      if (window.cordova && window.cordova.InAppBrowser) {
        window.open = window.cordova.InAppBrowser.open;
      }
。。。
    });
  })

})();

转载于:https://my.oschina.net/uniquejava/blog/525304