<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="Tokyo" class="tabcontent">
<br>
<a href="file:///C:/xampp/htdocs/final/pop.html" class="a-tag"
target="popup"
onclick="window.open('file:///C:/xampp/htdocs/final/pop.html','popup',`width=600,height=400,top=${window.outerHeight/2 - 250},left=${window.outerWidth/2 - 300}`); return false;">
Click to Upload Files
</a>
</div>
</body>
</html>When I click on click to upload files, a pop up occurs.
Here is my pop up window:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" multiple>
</body>
</html>I want to refresh my screen with click to upload files tag, whenever I close my pop up. How to achieve this? Thank you.
you can do this:
window.location.reload();
or you can use window.location.href, this method reload the page again. so you can do this too:
window.location.href = window.location.pathname + window.location.search + window.location.hash;
The OP wanted a way to identify whenever the popup has been closed before refreshing the page.
You can assign the popup to a variable and then use the window.onbeforeunload event to determine whenever the popup window is closed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="Tokyo" class="tabcontent">
<br>
<a href="file:///C:/xampp/htdocs/final/pop.html" class="a-tag"
target="popup"
onclick="onUserUpload()">
Click to Upload Files
</a>
</div>
</body>
</html> function onUserUpload(e) {
let popup = window.open(
'file:///C:/xampp/htdocs/final/pop.html',
'popup',
`width=600,height=400,top=${window.outerHeight/2 - 250},left=${window.outerWidth/2 - 300}`
);
popup.addEventListner('beforeunload', function refreshOnClose(e) {
//the event only fires after the popup window is closed
if(Object.keys(e).length) {
console.log('Popup is closed.');
popup.removeEventListener('beforeunload', refreshOnClose);
//reload current window
return window.location.reload();
}
}
})
window.reload()
<form onsubmit="window.reload()">
<input type="file" multiple />
</form>