Captive Wifi Popup: Click a link to open Safari
EDIT : this solution doesn't work after iOS 10.3. Not sure if that's a feature or a bug : https://forums.developer.apple.com/thread/75498
EDIT2 : Apparently it works again on iOS 11
There is a simple way to do that, if you have control over the captive portal server.
When connecting to a wifi network, iOS devices send a GET request to a bunch of predefined urls (http://www.apple.com/library/test/success.html, ...) , to see if there is Internet connectivity (wispr requests). The iOS device expects the answer <HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>. If the request succeeds, but the answer is different (for example your captive portal page), it triggers the CNA to open.
At this stage, the CNA thinks you are not connected and will show a Cancel button at the top. Every link will open inside the CNA and not in a Safari window, no matter what you do. The CNA is done so that you can get your user through the log-in process. In order to see if the log-in process is done and connection is finally established, the iOS device will now and then send another wispr request. This happens every 40 seconds, or whenever an HTTP request is emitted (navigation within the CNA).
When your server finally answers Success to a wispr request, the CNA will mark as connected, the button at the top will change into Done. At this stage, any link to an external url will close the CNA and open in Safari :)
So to summarize, you can achieve what you want with the following connection steps :
- server answers initial wispr request with your CNA page.
- the page opens in CNA. In that page, have some JavaScript that immediately triggers navigation within the CNA, for example :
<script>window.location.reload(true)</script>this will trigger the iOS device to immediately send another wispr request - server answers this second wispr request with
<HTML><HEAD><TITLE>Success</TITLE></HEAD><BODY>Success</BODY></HTML>, this will trigger the CNA to mark as connected - have your CNA page to show a link to an external url
Extracted from an answer by Ryan at How can I open an external link in Safari not the app's UIWebView?
To have a specific link switch to Safari, simply add target="_system" to the link, as in
<a href="http://www.domain.com/" target="_system">Link Text</a>Or to catch all links in your javascript that have target="_blank", include jQuery and pass them to window.open with the '_system' param. This will work on both iOS and Android.
$(document).on('click', 'a[target="_blank"]', function(ev) { var url; ev.preventDefault(); url = $(this).attr('href'); window.open(url, '_system');});
Javascript does NOT work fully in CNA, it is disabled for security reason.target="_system" is a safari feature, not a CNA one.==> briefly, _system fails in CNA.