Search code examples
androidangularcapacitor

Angular Capacitor iframe android not working


Angular Capacitor iframe android not working

Trying to use two different iframes in other forums, but it doesn't solve my problem. I'm using capacitor, chrome looks good too, but iframe won't load on android.

Angular CLI: 14.2.3 , npx : 8.19.2

capacitor.config.json

{
  "appId": "com.zbeun.app",
  "appName": "zbeun",
  "webDir": "www",
  "bundledWebRuntime": false,
  "server": {
    "allowNavigation": [
      "ilahiyat.beun.edu.tr","*.beun.edu.tr", "localhost", "*localhost*"
    ]
  }
}

wiev.html

<iframe [src]="Url" width="100%" style="height: 100vh;" target="_self" ></iframe>

wiev.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-wiev',
  templateUrl: './wiev.component.html',
  styleUrls: ['./wiev.component.scss']
})

export class WievComponent implements OnInit {

  Url: any;
  dangerousUrl!: string;
  
  constructor(private sanitizer: DomSanitizer) { 

    this.updateUrl('https://ilahiyat.beun.edu.tr/')
  }

  ngOnInit(): void {
  }

  updateUrl(url: string) {
    this.dangerousUrl = url;
    this.Url =this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousUrl);
  }

}

Solution

  • You can report the problem to app/manifests/AndroidManifest.xml file in android studio.

      <application
    .
    .
    .
      android:usesCleartextTraffic="true"
      >
    

    actually the problem was ERR_CLEARTEXT_NOT_PERMITTED problem :)