window.addEventListener('beforeunload', function () {
window.opener.document.getElementById("modalDivBackDrop").classList.remove("slds-backdrop--open");
});
It works nicely when the user closes the popup window. Unfortunately it also triggered when the user hits the NEXT button. The NEXT button looks like:<input id="j_id0:j_id1:i:f:pb:pbb:next" type="submit" name="j_id0:j_id1:i:f:pb:pbb:next" value="Next" style="visibility: visible;" class="btn FlowNextBtn">
I don't understand why the 'beforeunload' event is being triggered by the NEXT button. <style type="text/css">
.overlay {
background: rgba(0,0,0,.85);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
</style>
HTML <button>Click Me</button>
JavaScript<script>
$(function() {
$('button').click(function() {
$('body').append($('<div/>', {class: 'overlay'}));
window.open('t2196child.html');
});
});
window.addEventListener('message', function(e) {
console.log(e.data);
$('.overlay').remove();
}, false);
</script>
Child<!doctype html>
<html>
<body>
<h1> Close this form</h1>
<script>
window.addEventListener('beforeunload', function() {
window.opener.postMessage("done", window.location.href);
});
</script>
</body>
</html>
Working sample here
<apex:page showheader="false" sidebar="false">
<flow:interview name="New_Account_Wizard"></flow:interview>
<!-- New_Account_Wizard is a multi page flow with a form on each page -->
<!-- so at different stages of the flow the DOM will look different -->
<script>
window.onload = function () {
var frm = document.getElementById('j_id0:j_id1:i:f');
// do this only if the target FORM is on the curent page
if (typeof(frm) != 'undefined' && frm != null)
{
var accountNameField = document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input');
// do this only if the target accountNameField is on the curent page
if (typeof(accountNameField) != 'undefined' && accountNameField != null)
{
// Load the local Storage when the user hits the NEXT button. NEXT button does SUBMIT and goes to next page
frm.addEventListener('submit',function(evt) {
localStorage.setItem('AccountName', document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
});
}
}
var finishBtn = document.getElementById('j_id0:j_id1:i:f:pb:pbb:finish');
if (typeof(finishBtn) != 'undefined' && finishBtn != null)
{
// override the FINISH button on the last screen of the wizard. If you dont,
// the natural behaviour is to restart the wizard at page one.
finishBtn.addEventListener('click',function(evt2) {
evt2.preventDefault();
//console.log (document.body);
//var list = (opener.document.body)
// Remove backdrop which is covering the parent window
// window.opener.document.getElementById("modalDivBackDrop").classList.remove("slds-backdrop--open");
//console.log (list);
window.close();
});
}
}
window.addEventListener('beforeunload', function () {
window.opener.document.getElementById("modalDivBackDrop").classList.remove("slds-backdrop--open");
console.log('opened backdrop from popup window');
});
</script>
</apex:page>
window.opener.document.get
So rather that find the source of the problem and prevent it, I have chosen to monitor the symptom and fix it.