The Ionic 5 app features a white iframe that functions perfectly on the web platform

Whenever I run my web application's function, the iframe is displayed. However, on Android, all I see is a white screen. Can anyone assist with resolving this issue? HMTL

html


<ion-content>

 <ion-button expand="full" color="warning" (click)="showPdf()">Visualizar PDF</ion-button>

<iframe data-tap-disabled="true" [src]="sanitizer.bypassSecurityTrustResourceUrl(urlPDf)" *ngIf="viewPDF"></iframe>

</ion-content>

file.TS


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

@Component({
  selector: 'app-agendamento-perfil',
  templateUrl: './agendamento-perfil.page.html',
  styleUrls: ['./agendamento-perfil.page.scss'],
})
export class AgendamentoPerfilPage implements OnInit {



  urlPDf:String;
  viewPDF:Boolean = false;

  constructor(
    private sanitiser: Sanitizer,
    public sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

  showPdf(){
    this.urlPDf =  'https://www.soundczech.cz/temp/lorem-ipsum.pdf';
    this.viewPDF = true;
  }

}


Answer №1

Before proceeding, it is important to sanitize the URL using the following code snippet:

this.urlPDf =   this.sanitizer.sanitize(url)

There may be several reasons causing issues with loading the URL:

  1. One common issue could be the whitelist policy for navigating within the application Webview on Cordova.

To resolve this, you can add the necessary plugin by running the command:

ionic plugin add cordova-plugin-whitelist

Additionally, ensure that external URLs are allowed by adding these lines to the config.xml file:

<allow-intent href="http://*/*" launch-external="yes"/> <allow-intent href="https://*/*" launch-external="yes"/>
  1. If the issue persists, consider opening the URL in an ionic-native/in-app-browser as an alternative solution.

  2. Another workaround is to append Google Doc Viewer before the URL and then pass it through an Iframe element.

You can modify the URL by adding the Google Doc Viewer link as shown below:

url = 'https://docs.google.com/viewer?url=' + encodeURIComponent(url);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

Vue and TypeScript: The elusive 'exports' remains unidentified

Since switching my App.vue to utilize typescript, I am facing a compiler error: [tsl] ERROR in \src\main.ts(2,23) TS2304: Unable to locate the name 'exports'. If I have vue-serve recompile after making changes, I encounter t ...

Automatically forwarding to another page in Angular 4 due to idle time

Is it possible to implement a timeout feature for inactivity on a webpage? For example, if a user is idle for 20 seconds without interacting with the page, can we automatically redirect them to the home screen? I've been struggling to get this functi ...

JavaScript module declarations in TypeScript

Recently, I delved into the world of a Node library known as bpmn-js (npmjs.com). This library is coded in JavaScript and I wanted to incorporate typings, which led me to explore d.ts files. My folder structure looks like this webapp @types bpmn ...

Injecting dependencies into an abstract class in typescript using Angular 2

So I have an abstract class that doesn't have a constructor, and my goal is to inject another class into it. Here's the abstract class: import { ErrorHandler } from '../../shared/services/errorHandler.service'; import { Inject } from ...

Can the string literal type be implemented in an object interface?

My custom type is called Color, type Color = 'yellow' | 'red' | 'orange' In addition, I created an object with the interface named ColorSetting. interface ColorSetting { id: string yellow?: boolean red?: boolean orang ...

The process of invoking the parent class's Symbol.iterator function from the child class's Symbol.iterator can be achieved by following a specific

I have two TypeScript classes defined below. class BaseIter { constructor(public a: number, public b: number, public c: number, public d: number){} *[Symbol.iterator](): Iterator<number> { yield this.a yield this.b yield this.c y ...

React-Admin error: Attempting to invoke a built-in Promise constructor without using the new keyword is not allowed

I'm currently facing an issue where I am trying to retrieve data using a hook. Strangely, there are no TypeScript errors appearing, but when I run the code, a console error pops up stating "Uncaught TypeError: calling a builtin Promise constructor wit ...

When using Webpack and Typescript together with the watch feature, an error with code TS2554 may occur only during

Software in use: webpack 4.8.3 typescript 2.8.3 ts-loader 4.3.0 Configuration for Webpack: rules: [ { test: /\.ts(x?)$/, exclude: /node_modules/, use: ['ng-annotate-loader', 'ts-loader'] }, . ...

Leveraging the power of React's callback ref in conjunction with a

I'm currently working on updating our Checkbox react component to support the indeterminate state while also making sure it properly forwards refs. The existing checkbox component already uses a callback ref internally to handle the indeterminate prop ...

What is the best way to trigger a function in React when a constant value is updated?

In my React application, I have 3 components. The parent component and two child components named EziSchedule and EziTransaction. Each component fetches its own data from an API. The data to display in the EziTransaction child component depends on the reco ...

Preventing runtime error in Next.js API routes by handling axios exceptions

I am currently working on creating an API route in Next.js that sends a request to my backend and saves the token in the cookies. However, I am facing an issue where 4xx responses are causing an Unhandled runtime error. Despite everything working correctly ...

Angular does not wait for the backend service call response in tap

Does anyone have a solution for subscribing to responses when the tap operator is used in a service? edit(status) { dataObj.val = status; // call post service with status.. this.service .update(dataObj) .pipe(takeUntil(this._n ...

Is there a way to transfer a variable from Angular 2 Frontend Express JS to an Angular 2 component?

After conducting thorough research, I have made specific modifications to my code. However, I am encountering some errors in my console that I cannot seem to resolve. Despite following a tutorial step by step. Your assistance would be highly valued as I a ...

Who is responsible for the addition of this wrapper to my code?

Issue with Sourcemaps in Angular 2 TypeScript App Currently, I am working on an Angular 2 app using TypeScript, and deploying it with the help of SystemJS and Gulp. The problem arises when I try to incorporate sourcemaps. When I use inline sourcemaps, eve ...

What is the syntax for creating a zip function in TypeScript?

If I am looking to create a zip function: function zip(arrays){ // assume more than 1 array is given and all arrays // share the same length const len = arrays[0].length; const toReturn = new Array(len); for (let i = 0; i < len; i+ ...

Resolving Typescript custom path problem: module missing

While working on my TypeScript project with Express.js, I decided to customize the paths in my express tsconfig.json file. I followed this setup: https://i.stack.imgur.com/zhRpk.png Next, I proceeded to import my files using absolute custom paths without ...

retrieve the element from a different array using AngularJS version 1

How can I fetch a value from another array? I am using Ionic with Angular 1. In Angular 1, I have created two arrays as shown below: $scope.customers = [{id:1111, name:"Milan Shop", city:"Milan"},{id:2222, name:"Roma Shop", city:"Roma"}] $scope.SizeOfCu ...

Assessing the invalidity of user-defined type guards within class implementations

I just wrote this Typescript code and tested it in a sandbox. Check out the code snippet below: class Foo { public get test() : string|number{ return "foo" } public hasString() : this is { test:string }{ return type ...

What is the best way to interrupt the current song playing?

I am currently working on developing an audio player using reactjs that has a design similar to this https://i.sstatic.net/Hnw0C.png. The song boxes are rendered within a map function, and when any song box is clicked, it should start playing. However, I a ...