Javascript-Schaltfläche zum Schließen

JavaScript-Schaltflächenanwendung und -implementierung

Im Webdesign müssen wir manchmal eine Schließschaltfläche in einem Popup-Fenster oder einer modalen Box hinzufügen, damit Benutzer das Fenster jederzeit schließen können. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion der Schaltfläche „Schließen“ implementieren.

1. Verwenden Sie HTML-Code, um eine Schaltfläche zum Schließen zu erstellen

Im HTML-Code können wir das Tag <button> verwenden, um eine Schaltfläche zum Schließen zu erstellen: <button> 标签创建一个关闭按钮，其代码如下：

<button onclick="closeWindow()">关闭窗口</button>

其中，onclick 属性会在按钮被点击时触发某个函数。我们需要在 JavaScript 中定义 closeWindow() 函数，以实现关闭窗口的功能。

二、使用 Window 对象关闭窗口

在 JavaScript 中，我们可以使用 Window 对象来关闭当前窗口或者打开的子窗口。以下是两个实现方式：

1. 使用 window.close() 方法来关闭当前窗口：

function closeWindow() {
    window.close();
}

注意：window.close() 方法只能关闭由 JavaScript 打开的窗口。如果当前窗口是用户打开的，则该方法将不起作用。

2. 使用 window.opener 属性来关闭父窗口或者打开的子窗口：

function closeWindow() {
    window.opener=null;
    window.open('','_self');
    window.close();
}

在这个例子中，我们首先将 window.opener 设为 null，以保证关闭的窗口不会再次自动打开其父窗口。接着我们使用 window.open() 方法来打开一个空白窗口，这个方法的第一个参数为要打开的 URL，由于我们不需要打开任何网址，所以传入了一个空字符串。第二个参数为窗口名称，这里使用了 _self，表示在当前窗口中打开一个新网页。最后我们使用 window.close() 方法来关闭当前窗口。

三、在 jQuery 中实现关闭按钮

如果我们使用 jQuery 来编写 JavaScript 代码，可以使用以下两种方式来实现关闭按钮的功能：

1. 使用 window.close() 方法来关闭当前窗口（同上）：

function closeWindow() {
    window.close();
}

2. 在 jQuery 中模拟窗口关闭事件：

function closeWindow() {
    var windowEvent = jQuery.Event('beforeunload');
    $(window).trigger(windowEvent);

    if (!windowEvent.isDefaultPrevented()) {
        window.close();
    }
}

在这个例子中，我们首先定义了一个模拟的窗口关闭事件。接着使用 jQuery 的 trigger() 方法来触发该事件，这将会执行所有已注册到该事件的处理程序。如果处理程序无阻止事件的默认行为，则会执行 window.close() 方法来关闭当前窗口。

总结：

本文介绍了在 JavaScript 和 jQuery 中如何实现关闭按钮。无论你是通过 window.close()rrreee

Unter Bei ihnen löst das Attribut onclick eine Funktion aus, wenn auf die Schaltfläche geklickt wird. Wir müssen die Funktion closeWindow() in JavaScript definieren, um die Funktion zum Schließen des Fensters zu realisieren. 🎜🎜2. Verwenden Sie das Window-Objekt, um das Fenster zu schließen. 🎜🎜In JavaScript können wir das Window-Objekt verwenden, um das aktuelle Fenster oder ein geöffnetes untergeordnetes Fenster zu schließen. Im Folgenden sind zwei Implementierungsmethoden aufgeführt: 🎜

1. Verwenden Sie die Methode window.close(), um das aktuelle Fenster zu schließen:

rrreee🎜Hinweis: window. Die Methode close() kann nur von JavaScript geöffnete Fenster schließen. Diese Methode funktioniert nicht, wenn das aktuelle Fenster vom Benutzer geöffnet wird. 🎜

2. Verwenden Sie die Eigenschaft window.opener, um das übergeordnete Fenster oder das geöffnete untergeordnete Fenster zu schließen:

rrreee🎜In diesem Beispiel Wir setzen zunächst window.opener auf null, um sicherzustellen, dass das geschlossene Fenster sein übergeordnetes Fenster nicht automatisch erneut öffnet. Dann verwenden wir die Methode window.open(), um ein leeres Fenster zu öffnen. Da wir keine URL öffnen müssen, ist dies ein Nullzeichen als String übergeben. Der zweite Parameter ist der Fenstername, der hier verwendet wird, was bedeutet, dass eine neue Webseite im aktuellen Fenster geöffnet wird. Schließlich verwenden wir die Methode window.close(), um das aktuelle Fenster zu schließen. 🎜🎜3. Implementieren Sie die Schaltfläche „Schließen“ in jQuery🎜🎜Wenn wir jQuery zum Schreiben von JavaScript-Code verwenden, können wir die folgenden zwei Methoden verwenden, um die Funktion der Schaltfläche „Schließen“ zu implementieren: 🎜

1. Verwenden Sie window.close( ) Methode zum Schließen des aktuellen Fensters (wie oben):

rrreee

2. Simulieren Sie das Fensterschließereignis in jQuery:
rrreee 🎜In diesem Beispiel definieren wir zunächst ein simuliertes Fensterschließereignis. Verwenden Sie dann die Methode trigger() von jQuery, um das Ereignis auszulösen, wodurch alle für das Ereignis registrierten Handler ausgeführt werden. Wenn der Handler kein Standardverhalten zum Blockieren des Ereignisses hat, wird die Methode window.close() ausgeführt, um das aktuelle Fenster zu schließen. 🎜🎜Zusammenfassung: 🎜🎜In diesem Artikel wird erläutert, wie Sie die Schaltfläche „Schließen“ in JavaScript und jQuery implementieren. Unabhängig davon, ob Sie ein Fenster über die Methode window.close() schließen oder ein Fensterschließereignis simulieren, denken Sie daran, Ihr Schließverhalten in Ihrem Code klar zu definieren und es dem Benutzer mitzuteilen. 🎜

Das obige ist der detaillierte Inhalt vonJavascript-Schaltfläche zum Schließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!