Button with tel href breaks ZK

asked 2022-06-09 19:20:54 +0800

AndreiArdei gravatar image AndreiArdei
111 3

Hi. I defined a button which has a href tag set to tel:+0123456789. HTML should support this (link text). The button does not have a target set. What happens is that whenever there is a click on the button, the pop-up of the browser appears, and zk reacts in two possible ways:

  1. It redirects to the timeout, considering that the session was completed
  2. It stays on the same page / layout, however no ZK javascript works until re-loading the page. this means that you cannot select anything, insert anything in other fields.
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2022-06-13 11:09:16 +0800

MDuchemin gravatar image MDuchemin
2515 1 6
ZK Team

Hi there,

ZK has a window event listener for beforeUnload which triggers when the page navigates away from its current location (i.e. when user clicks a link).

This even does cleanup, sends a "page is not longer active" message to server, and shutdown the the page JS engine.

Even if the link targets "not a document" such as a tel link, mailto link, or document download link, the beforeUnload event will trigger. This is because the link is evaluated by the browser after triggering the beforeUnload and other "navigation away" workflows on the document. The browser then makes the decision to not process the link as a link, but with a browser level handler.

The easiest workaround for this used case would be to set a target="_blank" attribute on your link. However, that creates a temporary blank page, which you may not want for user experience. Another option is to add an iframe to page as well, and use that hidden iframe as the target for that navigation. This will still trigger the browser workflow with URL processing, without impacting the page.

In both cases, the "new page" (which is not a new page, but a link) will be evaluated by the browser without triggering beforeUnload on the current page.

See fiddle here: https://zkfiddle.org/sample/2ovmjej/3-Another-new-ZK-fiddle

link publish delete flag offensive edit


Thanks a lot! The iframe option works best, however, may I suggest adding this description to the Href or Button.Href section in the documentation ? I feel like it should belong there

AndreiArdei ( 2022-06-13 14:59:13 +0800 )edit

Good point. There was already the information regarding download links specifically, but I have expanded it to browser-processed links as well: https://www.zkoss.org/wiki/ZKComponentReference/EssentialComponents/Button#FileDownloadandbrowserprocessedlinks

MDuchemin ( 2022-06-13 17:59:40 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2022-06-09 19:20:54 +0800

Seen: 12 times

Last updated: Jun 13 '22

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More