app-xerintel commented 4 years ago

Bug Report

Iframe elements do not work properly when the application launches first time

Problem

We have several applications made with Ionic and with your platform, cordova-ios, which include iframe tags.

In Android they always work correctly, but in iOS it happens that when the application is run for the first time, several actions of the embedded web page (such as adding products to the cart, filling out forms, etc) are not executed correctly.

However, when you close the application and open it again, these actions do work correctly.

After investigating the problem ourselves, we have checked in the Safari inspector that the iframe cookies are not set when the application is first loaded. However, when closing the application and reopening it do appear, so we believe that this could be the origin of the problem (correct us if we are wrong).

Can you give us any idea, solution or alternative to fix this error?

What is expected to happen?

Iframe elements always working on iOS devices

What does actually happen?

Several actions of the embedded web page (such as adding products to the cart, filling out forms, etc) are not executed correctly.

However, when you close the application and open it again, these actions do work correctly.

Information

Command or Code

Angular code (.ts file):

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { UtilitiesService } from '../../services/utilities.service';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  public urlFrame: SafeResourceUrl;
  public loading: boolean = true;

  constructor(private sanitizer: DomSanitizer,
    private utilities: UtilitiesService, private storage: Storage) {
  }

  public ionViewDidEnter(): void {
    this.utilities.showLoading();
    this.loading = true;
    this.storage.get('idioma').then(idioma => {
      this.urlFrame = this.sanitizer.bypassSecurityTrustResourceUrl(environment.iframeUrl + 'locale/' + idioma + '/home');
    })

  }

  public dismissLoading() {
    this.loading = false;
    this.utilities.dismissLoading();
  }

}

.html file:

<ion-content>
  <div class="scroll" [hidden]="loading">
    <iframe #iframeCheckout id="iframe" class="web-page" name="events-page" [src]="urlFrame" frameborder="0"
      allowfullscreen sandbox="allow-same-origin allow-scripts allow-forms" (load)="dismissLoading()"></iframe>
  </div>
</ion-content>

.scss file:

.scroll {
  height: 100%;
}
.web-page {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

Environment, Platform, Device

Environment: macOS Catalina 10.15.4 Platform: iOS 13, iOS 13.+ Device: iOS devices

Version information

Cordova CLI: 9.0.0 (cordova-lib@9.0.1) Cordova plugins:

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
phonegap-plugin-push 2.3.0 "PushPlugin"

Ionic Framework: 4.7.1 Ionic CLI: 6.4.0

Checklist

[x] I searched for existing GitHub issues
[X] I updated all Cordova tooling to most recent version
[X] I included all the necessary information above

breautek commented 4 years ago

Related to: https://github.com/apache/cordova-ios/issues/944 (Cookies issue)

A potential workaround is documented at https://github.com/apache/cordova-ios/issues/944#issuecomment-660035130

ugale-deepak3010 commented 3 years ago

I am used iframe inside other url link that work good But I embed pdf url that not work only white block display Than I tried google doc viewer then and my url put. But later happen very wrong Sometime there show and sometimes not 😥😥😥

dpogue commented 1 year ago

I've marked this issue as stale because it's been over a year with no further comments. If this is still an issue in the latest cordova-ios version and an up-to-date iOS version, please let us know. Otherwise, this issue will be closed.