使用 apache wicket 的 onbeforeunload 事件答案

【问题标题】：onbeforeunload event with apache wicket使用 apache wicket 的 onbeforeunload 事件
【发布时间】：2013-11-27 09:45:44
【问题描述】：

我对 Apache Wicket 中的 JavaScript 事件 onbeforeunload 有疑问。

我想要做什么：我有一个变量告诉我数据是否发生了变化。现在我想打开 JavaScript 确认对话框 (confirm("my text");) 来询问用户是否确定他正在丢失他的更改。只有在发生变化时才会弹出此对话框。

有人知道这种行为是如何正常工作的吗？

我试过这个：

add(new AjaxEventBehavior("onbeforeunload") {

    @Override
    protected void onEvent(AjaxRequestTarget target) {
        target.prependJavaScript("confirm('my dialog');");
    }
});

它的作用：我现在得到两个对话框。第一个是一个对话框，其中包含文本“false”。第二个是我真正的对话。

有人参加过这个活动吗？

【问题讨论】：

标签： javascript event-handling dom-events wicket

【解决方案1】：

Michael，我发现你的介词错误 onbeforeunload 的工作原理以及 AjaxEventBehavior 在哪里。

AjaxEventBehavior 在 javascript 事件上添加侦听器。您可以使用众所周知的元素事件之一，例如“onclick”、“onchange”等。第二种方法是使用您自己的事件，例如'myevent' 并从 javascript 触发它。这两种情况都意味着您将 AjaxEventBehavior 添加到诸如“DIV”、“A”等 HTML 元素中。

但是'onbeforeunload'事件其实是另外一种情况，因为它是window定义的事件，所以是'window.onbeforeunload'。

最简单的方法之一是创建一个 HTML 元素并在其中添加一个自定义事件。然后在页面的 head 部分添加一个 javascript，将先前定义的事件的触发器添加到 onbeforeunload。

示例：

Wicket 1.6

标记

<div wicket:id="myElement">[just a placeholder tag]</div>

代码示例：

static String CUSTOM_EVENT_NAME = "myElementEvent";

add(new WebMarkupContainer("myElement") 
{
    private static final long serialVersionUID = 1L;

    @Override
    public void renderHead(IHeaderResponse response) 
    {
        super.renderHead(response);
        StringWriter sw = new StringWriter();
        sw.append("$(window).bind('onbeforeunload', function() { $('#");
        sw.append(getMakupId());
        sw.append("').trigger('");
        sw.append(CUSTOM_EVENT_NAME);
        sw.append("'); });");
        response.render(OnDomReadyHeaderItem.forScript(sw.toString()));
    }

}
.setOutputMarkupId(true)
.add(
    new AjaxEventBehavior(CUSTOM_EVENT_NAME) 
    {
        private static final long serialVersionUID = 1L;

        protected void onEvent(final AjaxRequestTarget target) 
        {
        // your code
        }
    })
);

【讨论】：

您将如何在 wicket 1.5.1 中执行此操作？

【解决方案2】：

使用 wicket 1.3.7 我解决了这个问题：

protected static final String EVENT_ON_UNLOAD = "onunload"; //Be shure eventname is lowercase only

body = new WebMarkupContainer("_body_")
{
    @Override
    public void renderHead(HtmlHeaderContainer container)
    {
        super.renderHead(container);

        StringWriter sw = new StringWriter();
        sw.append("window.addEventListener('beforeunload', function(e) { $('#");
        sw.append(body.getMarkupId());
        sw.append("').trigger('");
        sw.append(EVENT_ON_UNLOAD);
        sw.append("'); });");

        String javascript = sw.toString();
        IHeaderResponse response = container.getHeaderResponse();
        response.renderOnDomReadyJavascript(javascript);
    }
};
body.setOutputMarkupId(true);
body.add(new AjaxEventBehavior(EVENT_ON_UNLOAD)
{
    protected void onEvent(final AjaxRequestTarget target)
    {
        // your Code
    }
});
add(body);

我将它添加到简化看起来像这样的基本页面

<html>
  <head>
  ...
  </head>

  <body wicket:id="_body_">
    ...
  </body>
</html>

【讨论】：