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

前言

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

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

步骤

1、通用browser模块的开发

browser.html

{{browser.title}}

sandbox="allow-scripts allow-top-navigation allow-pointer-lock allow-same-origin allow-popups allow-forms"

[src]="browser.secUrl"

(load)="loaded()"

[ngClass]="{'logisticsPrice': browser.isLogisticsPrice}"

*ngIf="!browser.isWechatPage">

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"属性，避免了被屏蔽。