Schließen Sie den Browser-Tab in einem Browser-Fenster
Es gibt bestimmte Situationen, in denen das Schließen eines Browser-Tabs notwendig und unerlässlich sein kann, insbesondere wenn Sie Websites entwickeln, die Zahlungssysteme unterstützen (natürlich kann es andere mögliche Anwendungsfälle geben). Während einer Online-Transaktion wird eine Sitzung erstellt und im Hintergrund laufen verschiedene Dinge ab; und während dieser Zeit besteht die Aufgabe des Browsers darin, die Antwort des Servers anzuzeigen, damit der Client oder Benutzer sehen kann, was genau passiert.
Nachdem die Transaktion abgeschlossen ist, sollen wir die laufende Sitzung in diesem bestimmten Browser-Tab schließen, damit kein Missbrauch personenbezogener Daten erfolgen kann. Dies könnte also durch Schließen dieses bestimmten Browser-Tabs erfolgen.
Sie haben vielleicht dieses Szenario gesehen, bei dem Sie die Transaktion online über das Portal der Bank durchführen und dann, nachdem Sie sich vom Net-Banking-Konto abgemeldet haben, die Bank einen Text auf dem Bildschirm anzeigt, der uns auffordert, das Browserfenster zu schließen. Natürlich können Sie die Schließen-Schaltfläche im Browser verwenden, oder Sie können auch eine Schließen-Schaltfläche erstellen und den Benutzer auffordern, darauf zu klicken. Mal sehen, wie wir dies im Detail erreichen können.
Browser-Tab mit der Methode window.close() in JavaScript schließen in
Um einen Browser-Tab zu schließen, stellt uns JavaScript eine Methode zur Verfügung, die einem Fensterobjekt zugeordnet ist, und diese Methode heißt window.close(). Mit dieser Methode können wir unser Ziel, einen Browser-Tab zu schließen, leicht erreichen. Sie können die Methode close() auch direkt verwenden, ohne auch das Schlüsselwort window zu verwenden. Diese Methode wird von allen modernen Browsern wie Chrome, Brave und Firefox unterstützt.
Sehen wir uns also an, wie Sie diese Methode in JavaScript implementieren und den Browser-Tab schließen. In unserem HTML-Dokument haben wir ein body-Tag, das ein Anker-Tag und ein Skript-Tag enthält. Das Skript wird verwendet, um unsere JavaScript-Datei mit dem HTML-Dokument zu verknüpfen. Das Anker-Tag stellt die Schaltfläche dar, mit der wir den Vorgang zum Schließen des Browser-Tabs ausführen. Das Styling für dieses Anker-Tag, unseren Button, erfolgt innerhalb des style-Tags. Dieses Anker-Tag zeigt auf die Funktion close_tab(), die in unserer Skriptdatei vorhanden ist.
<!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>
<style>
body{
margin-top: 50px;
margin-left: 50px;
}
a{
width: 100px;
height: 50px;
background-color: brown;
color: #ffffff;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<!-- This is a button -->
<a href="javascript:close_tab();">close browser tab</a>
<script src="script.js"></script>
</body>
</html>
In unserer Datei script.js haben wir eine Funktion namens close_tab(), die nur ausgeführt wird, wenn der Benutzer auf die Schaltfläche close browser tab in unserem HTML-Dokument klickt.
function close_tab() {
if (confirm('Do you want to close this tab?')) {
window.close();
}
}
Hier verwenden wir auch eine andere Methode namens confirm(), die einen String als Parameter verwendet. Diese Methode zeigt ein Popup- oder Warnfenster mit der Zeichenkette an, die wir als Parameter an confirm() übergeben haben, und sie hat auch die Schaltflächen Ok und Cancel. Und wir rufen diese Methode innerhalb der if-Anweisung auf, weil diese Funktion entweder true oder falsche Werte zurückgibt.
Wenn der Benutzer also die Schaltfläche cancel gedrückt hat, gibt die Funktion confirm() false zurück. Drückt der Benutzer die Taste Ok, dann gibt die Funktion true zurück. Wenn die Funktion close() false zurückgibt, wird unser if-Block nicht ausgeführt und wenn sie true zurückgegeben hat, wird nur unser if-Block ausgeführt und dann unsere Funktion window.close() ausgeführt wird. Es schließt dann den Browser-Tab.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn