Ionic2实战-第三方页面嵌入功能开发

前言

本功能的主要作用是通过url，将第三方的页面直接嵌入APP中，当成原生页面来展示。这样既可以方便与第三方集成，也避免了自己进行重复开发。

本功能的基本设计思路就是先封装一个自己的浏览器模块，用iframe的形式实现。然后需要展示第三方url时就跳转到该模块，用iframe将url展示出来。这样的话就不需要每个地方都自己写一遍brower模块了，可以最大化进行代码复用。

步骤

1、通用browser模块的开发

browser.html

  
    {{browser.title}}

    
      
        
      
    
  


 
  

    

  

  
  

  

browser.sccc

page-browser {
  $progress-height: 0.2rem;
  $progress-bg: #77b6ff;

  /*.scroll-content {
    overflow: hidden;
  }*/

  .content {
    height: 100%;
  }

  .progress{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: $progress-height;
    background: #f5f5f5;
    z-index: 200;

    .progress-inner{
      width: 0;
      background: $progress-bg;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      box-shadow: 0 0 10px rgba(119,182,255,0.7);
      -webkit-transition: width 0.4s ease;
      transition: width 0.4s ease;
    }
  }

  .iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
    border: none;
  }

  .logisticsPrice{
    height: 120%;
    margin-top: -70px;
  }
}

browser.ts

import { Component } from '@angular/core';
import { NavController, NavParams, PopoverController } from 'ionic-angular';
import { DomSanitizer } from "@angular/platform-browser";
import {BrowserPopoverPage} from "./browser-popover";
import {Helper} from "../services/helper.service";

@Component({
  selector: 'page-browser',
  templateUrl: 'browser.html'
})
export class BrowserPage {
  browser: any = {
    isLoaded: false, // 网页是否被加载
    proObj: null, // 进度条对象
    progress: 0, // 网页访问的进度条
    secUrl: '', // 安全链接
    innerHtml: '',
    title: '加载中',
    url: '',
    isWechatPage: false,
    isLogisticsPrice: false,
    share: null // 是否具有分享功能（传递一个分享对象ShareModel过来）
  };

  shareConfig: any = {
    isShow: false
  }; // 分享控制的配置

  constructor(public navCtrl: NavController,
              private params: NavParams,
              private sanitizer: DomSanitizer,
              private helper: Helper,
              private popoverCtrl: PopoverController) {
    let browser = this.params.get('browser');

    if(browser) {
      this.browser.title = browser.title;
      this.browser.isWechatPage = browser.isWechatPage;
      this.browser.isLogisticsPrice = browser.isLogisticsPrice;
      if(browser.isWechatPage){

        this.helper.getResponseFromUrl(browser.url)
          .then(ret => {
            let html = ret.text();
            this.browser.innerHtml = this.sanitizer.bypassSecurityTrustHtml(html);
            }
          );

      } else {
        this.browser.url = browser.url;
        this.browser.secUrl = this.sanitizer.bypassSecurityTrustResourceUrl(browser.url);
      }


      if(browser.share) {
        this.browser.share = browser.share;
      }

    } else {
      this.browser.secUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.browser.url);
    }

    if(!browser.isWechatPage){
      this.reload();
    }
  }

  ionViewDidLoad() {
    if(!this.browser.proObj) {
      this.browser.proObj = document.getElementById('progress');
    }
    this.onprogress();
  }

  // 生成随机数
  private random(min: number, max: number): number {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  // 网页访问进度
  private onprogress() {
    // 随机时间
    let timeout = this.random(10, 30);

    let timer = setTimeout(() => {
      if(this.browser.isLoaded) {
        this.browser.proObj.style.width = '100%';
        clearTimeout(timer);
        return;
      }

      // 随机进度
      this.browser.progress += this.random(1, 5);

      // 随机进度不能超过 90%，以免页面还没加载完毕，进度已经 100% 了
      if(this.browser.progress > 90){
        this.browser.progress = 90;
      }

      this.browser.proObj.style.width = this.browser.progress + '%';
      this.onprogress();
    }, timeout);
  }

  // 如果iframe页面加载成功后
  loaded() {
    this.browser.isLoaded = true;
  }

  // 显示Popver选项
  presentPopover(myEvent) {
    let cb = {
      refresh: () => {
        this.reload();
      },
      close: () => {
        this.navCtrl.pop();
      },
      share: null
    };

    if(this.browser.share) {
      cb.share = () => {
        this.share();
      }
    }

    let popover = this.popoverCtrl.create(BrowserPopoverPage, {
      callback: cb
    });
    popover.present({
      ev: myEvent
    });
  }

  // 重新加载页面
  reload() {
    let title = this.browser.title;
    let url = this.browser.secUrl;
    this.browser.title = '加载中';
    this.browser.secUrl = this.sanitizer.bypassSecurityTrustResourceUrl('');

    setTimeout(() => {
      this.browser.isLoaded = false;
      this.browser.progress = 0;
      if(!this.browser.proObj) {
        this.browser.proObj = document.getElementById('progress');
      }
      this.onprogress();
      this.browser.title = title;
      this.browser.secUrl = url;
    }, 10);
  }

  // 分享页面（作为popover的回调）
  share() {
    this.shareConfig.isShow = true;
    /*if(this.browser.share) {
     SocialSharing.share(this.browser.share.title, this.browser.share.content, '', this.browser.share.url).then(() => {

     }, (err) => {
     // Error!
     alert('错误：分享失败！' + err);
     });
     }*/
  }
}

3、需要使用的模块导入brower模块

2、使用brower模块进行url展示

  gotoLogisticsPricePage() {
    this.navCtrl.push(BrowserPage, {
      browser: {
        title: '查运价',
        url: 'http://shipper.huodada.com/freight/list.shtml?startProvince=%E9%99%95%E8%A5%BF%E7%9C%81&startCity=%E6%A6%86%E6%9E%97%E5%B8%82&startCountry=%E7%A5%9E%E6%9C%A8%E5%8E%BF&endProvince=&endCity=&endCountry='
      }
    });
  }

最后

值得注意的一点是，因为微信公众的url不能直接放在iframe里面进行展示，所以使用了div的[innerHtml]="browser.innerHtml"属性，避免了被屏蔽。