Пример Javascript кода для замены встроенного веб-приложения iFrame на AJAX <div>(НЕТ jQuery, пожалуйста) - PullRequest
Новая
       86

Пример Javascript кода для замены встроенного веб-приложения iFrame на AJAX <div>(НЕТ jQuery, пожалуйста)

0 голосов
/ 30 января 2020

Пример Javascript кода для замены встроенного веб-приложения iFrame на AJAX (НЕТ jQuery, пожалуйста)

Привет, у меня есть простая 'родительская' html страница с дочерним iframe, который загружает другое внешнее веб-приложение из другого домена.

Вот родительская страница html: https://shared-testing.s3-us-west-1.amazonaws.com/Example-iFrame-Web-App.html

Проблема: Эта простая страница отлично работает в таких браузерах, как chrome / Сафари. Но когда я открываю ту же ссылку на моем iphone safari / chrome, веб-приложение показывает экран входа в систему. Так что в основном то, что работало в настольном браузере, не работает в мобильном Safari / Chrome.

(Я не понимаю iframes больше, чем простой синтаксис, но, похоже, есть некоторая проблема с тем, как сторонние файлы cookie обрабатываются в мобильных браузерах ... но почему это работает в браузере настольного компьютера, а не в мобильных браузерах ??? ... Я довольно озадачен этим вопросом и могу ошибаться в этом тезисе.)

Из того, что я узнал до сих пор, iframes менее желательны (по мнению некоторых экспертов, и Я не), я склоняюсь к замене iFrame на простой, который наш код AJAX заменит внешним веб-приложением и покажет приложение, как и раньше, на моей родительской странице html.

Я уверен, что это не первый раз, когда это происходит, но после большого поиска я не смог найти пример кода, который поможет мне сделать это без jQuery. Я хочу использовать для этого обычный Javascript и избегать jQuery.

Так что, если вы можете помочь с одним из следующих, я был бы очень признателен:

  1. Почему текущий родительский элемент html ведет себя по-разному в настольных браузерах по сравнению с мобильным браузеры? Любые идеи, чтобы заставить это работать последовательно в браузерах всех размеров?
  2. Пример кода для замены iframe на чистый javascript AJAX подход для загрузки веб-приложения.

Спасибо большое.

Копирование простого html родительского файла ниже: 

<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>
...