Ionic 3中的Webview
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ionic 3中的Webview相关的知识,希望对你有一定的参考价值。
我有一个博客,希望将其转换为离子应用程序。我使用InAppBrowser
插件,但问题是,当我按“后退”按钮时,它将出现在我的默认Ionic home
页面上。
我遵循以下步骤:
ionic start myblog
ionic platform add android
ionic cordova plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser
然后在provider
中添加app.module
,并在home.ts
中编写以下内容。
import { InAppBrowser } from '@ionic-native/in-app-browser';
constructor(private iab: InAppBrowser) { }
...
const browser = this.iab.create('https://ionicframework.com/','_self','location=no');
browser.show();
也location=no
无效。像android ionic一样提供webview
谁能帮我吗 ?任何帮助表示赞赏。 :)
简单来说,您无需安装任何插件,就可以在其中使用标签来定义您博客的url。例如在home.ts中:
import { DomSanitizer } from '@angular/platform-browser';
url: any;
constructor(private sanitize: DomSanitizer){
this.url = sanitize.bypassSecurityTrustResourceUrl("YOUR_URL");
}
并且在home.html
中:
<iframe height="100%" width="100%" [src]="url" name="iframe_a"></iframe>
尝试一下。
my github repo中的简单排序解决方案>
在home.html
中
<iframe height="100%" width="100%" [src]="urlpaste()"></iframe>
和
home.ts
中>import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { url: any; constructor(private sanitize: DomSanitizer) {} urlpaste(){ this.url = "https://hackerrankgeek.wordpress.com/"; return this.sanitize.bypassSecurityTrustResourceUrl(this.url); } }
以上是关于Ionic 3中的Webview的主要内容,如果未能解决你的问题,请参考以下文章
将 iOS 事件传递给 Ionic/Capacitor webview
ionic框架中的Android Webview等价物是啥?
android webview怎么加载ionic的html5
ionic5 webview 应用程序浏览器事件与 android 设备后退按钮不同步
在 webview_flutter 中启用捏合和缩放,在哪里添加代码片段 [this.webView.getSettings().setBuiltInZoomControls(true);]