apache
Iframe elements do not work properly when the application launches first time
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 ([email protected])
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
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
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 😥😥😥
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.
