Я слегка удивлен, увидев, что он работает в любом браузере. Позволяя отправке родительской формы произойти, вы разрушаете страницу, что означает разрушение iframe, и любые запросы, которые могут выполняться, могут быть прерваны (или, если они не совсем запущены, никогда не начнутся).
Я бы, вероятно, переключился на ajax, а не на фактическую отправку формы.
Но если вы хотите сделать отправку формы, чтобы сделать это надежно, вам придется подождать, пока передача фрейма завершится, прежде чем делатьродительское представление. Самый простой способ сделать это - отправить фрейм с небольшой страницей с JavaScript на нем, которая сообщает родителю, что он закончил:
<!DOCTYPE html>
<html>
<body>
<script>
if (parent && parent.formCallback) {
parent.formCallback();
}
</script>
</body>
</html>
Тогда родительская страница выглядит примерно так:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction() {
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
return false; // <−−−−−−−− cancel submission
}
function formCallback() { //
document.getElementById("parentForm").submit(); // <−−−−−−−− Submit on callback
} //
</script>
</head>
<body>
<!-- vvvvvvvvvvvvvvv−−−−−−−− Added ID -->
<form id="parentForm" action="/index-submit" onSubmit="return submitFunction()">
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
Но вам может сойти с рук только обнаружение изменения местоположения в iframe. Для этого нужно просто изменить родительскую страницу, как указано:
<!DOCTYPE html>
<html>
<head>
<script>
function submitFunction(form) { // <−−−−−−−− Added parameter
var myFrame = document.getElementById("myFrame");
var myForm = myFrame.contentWindow.document.getElementById("myForm");
myForm.submit();
// Wait for the location of the iframe window to change
setInterval(function() {
if (String(myFrame.contentWindow.location).includes("frame-submit")) {
// Frame's form submitted, we can submit ours
form.submit();
}
}, 100);
return false; // <−−−−−−−− cancel submission
}
</script>
</head>
<body>
<form action="/index-submit" onSubmit="return submitFunction(this)">
<!-- ^^^^−−−−−−−−− added argument -->
<input type="hidden" name="index-field" value="x">
<input type="submit" value="Submit">
</form>
<iframe id="myFrame" src="frame-box.html"></iframe>
</body>
</html>
Я бы не ожидал, что это сработает, если форма во фрейме будет значительно загружена (хотя я могу ошибаться в этом).