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

Pressing a button that appears multiple times and is also embedded within layers

I am facing an issue where I need to interact with a button that appears multiple times on the website within nested cards. Specifically, I am trying to locate the card containing a pet named Bala, as shown in the attachment below, and click on the Detail ...

The correct way to update component state when handling an onChange event in React using Typescript

How can I update the state for 'selectedValues' in a React component called CheckboxWindow when the onChange() function is triggered by clicking on a checkbox? export const CheckboxWindow: React.FC<Props> = props => { const [selected ...

Exploring Angular 7: Understanding the HTML5 Fullscreen API and Overcoming Errors

I am currently using Angular 7 and I am trying to implement a fullscreen button in my app. I have utilized the HTML5 Fullscreen API and created two functions for this purpose: openfullscreen() { // Trigger fullscreen console.log('gg'); ...

Module '. ' or its corresponding type declarations cannot be located

While working on my project with TypeScript and using Cheerio, I encountered an issue when trying to compile it with TSC. The compiler threw the following exception: error TS2307: Cannot find module '.' or its corresponding type declarations. 2 ...

Accessing Webpack bundles using an "@" symbol for imports

I am currently working on bundling a Node Express server that was created using TypeScript and is being packaged with Webpack. Everything seems to be running smoothly when I compile/transpile the code into one JavaScript file called server.js. However, af ...

Bring in numerous variables into a Gatsby component using TypeScript and GraphQL Typegen

import { graphql } from 'gatsby'; const Footer = ({phone}: { phone?: Queries.FooterFragment['phone'];}): JSX.Element => { return <footer>{phone}</footer>; }; export default Footer export const query = graphql` fragm ...

What is the best way to create a sortable column that is based on a nested object within data.record?

I am utilizing jquery jtable to showcase some data in a table. I have been using the following code snippet for each field in the table to display the data and enable sorting: sorting: true, display: (data) => { return data.record.<whatever_value ...

Having trouble with updating React state? The useEffect hook runs when attempting to change the state, but it seems to have the

Having worked with useEffect and its ability to trigger after a state variable has been updated, I am well-versed in its functionality. I'm currently drafting this post on my phone while away from home. Here's the setup I have: const [dateValue ...

Occasionally, when navigating between form fields in UIWebView, the webview may unexpectedly disappear

Currently, I am involved in a project that utilizes Angular with Ionic. An issue has arisen in a specific page containing numerous form fields. When navigating through these form fields, the webpage suddenly goes blank. Interestingly, tapping on the WebVi ...

Using TypeScript, apply an event to every element within an array of elements through iteration

I have written the code snippet below, however I am encountering an issue where every element alerts the index of the last iteration. For instance, if there are 24 items in the elements array, each element will alert "Changed row 23" on change. I underst ...

To trigger the action of any button in Ionic/Angular, I need to double-click

I am encountering an issue with an app that I developed using the Ionic framework. While the app works perfectly on Android devices, I am facing a peculiar situation on iOS. Every time I click a button in the Simulator or on an actual iOS device, I have t ...

How can I ensure that a particular component type passes the typescript check in a react-typescript project?

I'm fairly new to using TypeScript, although I have a lot of experience with React (and prop-types). Recently, I've run into an issue when it comes to typing my components, specifically when another component is passed as a prop. I already have ...

A Step-by-Step Guide on Updating Your Angular 7 Project to Angular Version

I am facing a challenge with my Angular material project, which is currently outdated and needs to be updated to version 13. Running npm outdated revealed the following results: https://i.stack.imgur.com/ayjDu.png The Angular update guide suggests upgra ...

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

I am currently developing a filter component that allows for the selection of multiple checkboxes. My goal is to toggle the state of the checkboxes, store the checked ones in an array, and remove any unchecked checkboxes from the array. Despite my attemp ...

Nested self-referencing in Typescript involves a structure where

Please note that the code below has been simplified to highlight a specific issue. The explanation before the code may be lengthy, but it is necessary for clarity. Imagine I have a Foo class that represents a complex object. interface Config { bars:{ ...

Saving a local JSON file in Angular 5 using Typescript

I am currently working on developing a local app for personal use, and I want to store all data locally in JSON format. I have created a Posts Interface and an array with the following data structure: this.p = [{ posts:{ id: 'hey man&ap ...

Using Node.js and TypeScript to define custom data types has become a common practice among developers

I offer a variety of services, all yielding the same outcome: type result = { success: boolean data?: any } const serviceA = async (): Promise<result> => { ... } const serviceB = async (): Promise<result> => { ... } However, th ...

Add a hyperlink within a button element

I am looking to add a route to my reusable 'button' component in order to navigate to another page. I attempted using the <Link> </Link> tags, but it affected my CSS and caused the 'button' to appear small. The link works if ...

Mastering Angular Apollo Error Resolution Methods

Hey everyone, I'm facing a problem with apollo-angular and apollo-link-error that I just can't seem to figure out. I've experimented with different approaches but have had no luck catching errors on the client-side of my angular web app. Bel ...

Using TypeScript to automatically deduce the output type of a function by analyzing the recursive input type

I am currently working on developing an ORM for a graph database using TypeScript. Specifically, I am focusing on enhancing the "find" method to retrieve a list of a specific entity. The goal is to allow the function to accept a structure detailing the joi ...