Sample Javascript code to replace iFrame embedded web application with AJAX (NO jQuery please)
Hi, I have a simple 'parent' html page with a 'child' iframe that loads another external web application from a different domain.
Here is the parent html page: https://shared-testing.s3-us-west-1.amazonaws.com/Example-iFrame-Web-App.html
The Problem: This simple page works fine on desktop browsers like chrome/Safari. But When I open the same link on my iphone safari/chrome, the web-app shows login screen. So basically what worked in desktop browser is not working in mobile Safari/Chrome.
(I don't understand iframes more than the simple syntax, but it seems there is some issue with how 3rd party cookies are handled in the mobile browsers... but how come it works on desktop browser and not on mobile browsers???... I am pretty confused about this point and I may be wrong about this thesis.)
From what I learned so far, iframes are less desirable (as per some experts, and I am not), I am inclining towards replacing the iFrame with a simple that our AJAX code will replace with the external web-app and show the application as before in my parent html page.
I am sure this is not the first time this has come up but after searching a lot, I was not able to find some example code that will help me do this without jQuery. I want to use plain Javascript for this and avoid jQuery.
So if you can help with either one of the following, I'd greatly appreciate it:
- Why is the current html parent behaving differently in desktop browsers versus the mobile browsers? Any ideas to make it work consistently in all size browsers?
- Sample code to replace the iframe with pure javascript AJAX approach to load the web-application.
Thanks a lot.
Copying the simple html parent file below:
<html>
<head>
<title>Sample Web-App Embedded in iFrame </title>
<style>
.example-container{
background-color:#bffdf6;
width: 100%;
padding: 30px;
}
.example-iframe{
margin: 0 auto;
display: block;
}
</style>
</head>
<body >
<div class="example-container">
<h3> This a test web page for embedding an interactive flowchart using iframe.</h3>
<iframe class="example-iframe" height="600px" width="550px" src="https://www.decizone.com/47/qZPlK2ezwIK8x3bO/How-to-Measure-Shipment-Delivery-Success-KPI/Ship-Delvry-KPI/id/5AKwBABWqJgLs1IUfqrEh1ARDstiBMcy ">
<p>Your browser does not support iframes.</p>
</iframe>
<p> <strong>NOTE:</strong>: Try opening this page on desktop as well as mobile browsers to test.</p>
</div>
</body>
</html>