Elm编程中是否存在等价于Window:beforeunload事件的实现？

Elm核心库和官方Browser.Events模块确实没有直接提供beforeunload事件的封装，要实现这个需求，必须通过**端口（Ports）**与JavaScript交互，利用原生浏览器API来完成。以下是具体实现步骤：

1. 在Elm中定义端口 #

首先在你的Elm模块里声明一个端口，用来通知JavaScript是否启用离开提示：

port module Main exposing (..)

import Browser
import Html exposing (Html, button, text, div)
import Html.Events exposing (onClick)

-- 端口：向JS发送指令，控制是否启用beforeunload监听
port setBeforeUnload : Bool -> Cmd msg

type Msg
    = EnableLeaveWarning
    | DisableLeaveWarning

update : Msg -> () -> ((), Cmd Msg)
update msg _ =
    case msg of
        EnableLeaveWarning ->
            ((), setBeforeUnload True)

        DisableLeaveWarning ->
            ((), setBeforeUnload False)

view : () -> Html Msg
view _ =
    div []
        [ button [ onClick EnableLeaveWarning ] [ text "启用离开警告" ]
        , button [ onClick DisableLeaveWarning ] [ text "禁用离开警告" ]
        ]

main : Program () () Msg
main =
    Browser.element
        { init = \_ -> ((), Cmd.none)
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

2. 在JavaScript中处理原生事件 #

在页面的HTML文件里，添加对应的JS代码，监听Elm端口的消息，注册或移除beforeunload事件：

// 初始化Elm应用
const app = Elm.Main.init({ node: document.getElementById('elm-app') });

// 监听Elm发送的端口指令
app.ports.setBeforeUnload.subscribe(function(enable) {
    if (enable) {
        window.addEventListener('beforeunload', handleBeforeUnload);
    } else {
        window.removeEventListener('beforeunload', handleBeforeUnload);
    }
});

// 处理beforeunload事件，触发浏览器默认对话框
function handleBeforeUnload(event) {
    // 阻止默认行为（部分浏览器需要）
    event.preventDefault();
    // 设置returnValue（部分浏览器要求非空值才能触发对话框）
    event.returnValue = '';
}

关键说明 #

• 端口是Elm与外部JavaScript通信的唯一官方方式，通过它可以对接Elm不支持的原生浏览器API。
• 当用户尝试关闭标签页、刷新页面或导航到其他地址时，beforeunload事件会触发，此时上述JS代码会唤起浏览器的默认确认对话框。
• 如果需要在Elm中处理离开前的同步逻辑（比如保存临时数据），可以额外定义一个从JS到Elm的端口，在handleBeforeUnload中向Elm发送消息，但要注意：beforeunload事件中不支持异步操作，浏览器会忽略未完成的异步任务。

注意事项 #

• 不同浏览器对beforeunload的提示文本限制不同，多数现代浏览器会忽略自定义文本，只显示系统默认提示。
• 避免不必要的启用该功能，频繁触发确认对话框会严重影响用户体验。

内容的提问来源于stack exchange，提问作者Bond007