Hello, I’ve been trying to find a tutorial on how to use webview, and the documentation, at least for me, is not very clear (I am not an engineer by trade, but always learning).
I have a circumstance that I can not get an iframe to work as desired with a remote site; (the site loads, but the iframe adjusts to the height of the loaded website and therefor the sticky header doesn’t work.)
So I thought I would try webview instead. So 2 questions:
- Can webview (if origin, allowNavigation are set properly in config.xml) load remote websites?
- If yes, can you point me to a tutorial, fiddle, or similar to help me get started, just need a nudge.
Here is how I have the iframe working, but I’m not sure what to change here for webview:
HTML:
<ion-content>
<div>
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
and the JS:
import { Component, OnInit } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { ToastController } from "@ionic/angular";
import { Network } from "@ionic-native/network/ngx";
import { WebView } from "@ionic-native/ionic-webview/ngx";
@Component({
selector: "app-tab1",
templateUrl: "tab1.page.html"
})
export class Tab1Page implements OnInit {
myurl: any = "";
constructor(
private network: Network,
private toastCtrl: ToastController,
private sanitizer: DomSanitizer,
private webview: WebView
) {}
ngOnInit() {
if (this.network.type != "none") {
let hello = this.webview.
this.myurl = this.sanitizer.bypassSecurityTrustResourceUrl(
"https://mywebsite.com/"
);
} else {
let toast = this.toastCtrl
.create({
message: "Please check your internet connection.",
duration: 2000,
position: "middle"
})
.then(toastData => {
toastData.present();
});
}
}
}
Thank you in advance for any direction. I appreciate it.