У меня есть веб-приложение, которое работает на iPad mini. Значок для него был добавлен на рабочий стол, чтобы он мог работать без элементов пользовательского интерфейса браузера. В приложении есть пункт, в котором я должен отображать контент с другого веб-сайта в рамках IFRAME. Другой веб-сайт пытается установить URL верхнего уровня. Чтобы обойти это, мне пришлось использовать атрибут SANDBOX на IFRAME, чтобы другой веб-сайт открывался в окне диалогового типа.
<iframe id="testIframe" sandbox="allow-scripts allow-same-origin allow-top-navigation allow-top-navigation-by-user-activation" seamless ></iframe>
Содержимое отображается так, как ожидается. Проблема возникает, когда кто-то нажимает кнопку «Готово», чтобы закрыть диалоговое окно «IFRAME». Пользовательский интерфейс возвращается на мою страницу, и состояние страницы восстанавливается автоматически. К сожалению, это включает в себя состояние IFRAME. Как только пользовательский интерфейс возвращается на мою страницу, IFRAME снова открывает диалоговое окно. Это оставляет приложение в al oop, где кто-то может только просматривать содержимое IFRAME оттуда.
Есть ли способ предотвратить такое поведение?
(примечание: я проверил это на iPad Pro с тем же номером прошивки и вижу совершенно другое поведение для того же HTML)
Мне удалось повторить поведение, описанное ниже. Фактический URL, который я пытаюсь загрузить, опущен для конфиденциальности.
JavaScript:
function go() {
var address = document.getElementById('addressTextbox').value;
console.log(address)
var iframe = document.getElementById('testIframe');
iframe.src = address;
console.log(iframe.src);
}
function preventReload() {
var iframe = document.getElementById('testIframe');
iframe.src = '';
console.debug('set iframe src = nothing');
}
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
preventReload();
}
window.onbeforeunload=preventReload;
window.onload=preventReload;
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Guest Control">
<meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="PRAGMA" CONTENT="NO-CACHE">
<!--PWA-ish attributes-->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="./jxi.png">
<title>IFRAME test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
background-color: #F080A0;
margin:0px;
padding:0px;
width:100%;
height:100%;
}
iframe {
width:100%;
}
#rootVisual {
background-color: #808080;
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
#addressArea {
background-clip: #8080FF;
position:absolute;
top:0px;
left:0px;
right:0px;
height:30px;
}
#testIframe {
position:absolute;
top:0x;
left:0;
right:0;
height:100%;
bottom:0;
}
</style>
<script src="go.js"></script>
<script>
</script>
</head>
<body>
<div id="rootVisual">
<iframe id="testIframe" sandbox="allow-scripts allow-same-origin allow-top-navigation allow-top-navigation-by-user-activation" seamless ></iframe>
<div id="addressArea">
<input type="text" id="addressTextbox" value="">
<button id="goButton" onclick="go()" >Go</button>
<button id="gogoButton" onclick="go();go()">Gogo</button>
</div>
</div>
</body>
</html>