25

I run a web page in iPhone Safari. The page has a button. on clicking it, will show an alert message box. This is OK. Then, I change or add # hash URL by typing in the address bar, then, alert message box stop working. I click the button, and nothing happens. No javascript error but no alert message box.

video recording of the issue

Is this iOS Safari known issue?

Please share your thoughts and the solution you have come up with. Many Thanks!

$(".button").click(function () {
  alert('Hello');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input class="button" type="button" value="alert" />

Note:

  • This is not quite due to my code. I have also tested at Here
  • I have tested in the most recent iOS versions.
  • Javascript itself is working
  • Not JQuery issue, plain JS code also does not work
  • An alert box is working in iPhone Chrome or other browsers
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
Pyae Phyo Aung
  • 828
  • 2
  • 10
  • 29
  • Can you add your button html and the js code to trigger the alert? – Vinod Bhavnani Jan 19 '18 at 09:19
  • @VinodBhavnani this is not my code's issue. I have tested at w3school alert message tutorial, and there also happens this issue. – Pyae Phyo Aung Jan 19 '18 at 09:22
  • This code snippet works fine, even in iOS Safari, even when adding a fragment to the URL. – deceze Jan 19 '18 at 09:52
  • 1
    @deceze please try 2 times in consecutive without reloading. first try is OK. second try (change # part), and will not be OK. – Pyae Phyo Aung Jan 19 '18 at 09:55
  • Did you test anywhere else? – zearthur99 Mar 14 '18 at 01:42
  • @zearthur99 also tested in iPad, and see the same issue there. – Pyae Phyo Aung Mar 14 '18 at 04:16
  • 2
    I can replicate this issue on an iPad, as described here. A solitary `#` works, `#hash` works but having the slash `#/hash` does not. – Lee Kowalkowski Mar 14 '18 at 22:14
  • ...actually, sometimes it works. – Lee Kowalkowski Mar 14 '18 at 22:21
  • Have you tried using .on('click') instead of .click? – Saeed.Gh Mar 15 '18 at 03:08
  • @Saeed.Gh yes, but also does not work – Pyae Phyo Aung Mar 16 '18 at 09:12
  • 2
    `#` is a fragment separator. In safari Mobile, if you append anything with `#` url and click **go** page is not actually reloading; instead safari is trying to locate the fragment in the webpage and I believe it is what is causing the alert not to function. But if you reload the page manually even with `#`, alert works fine. – Sarath Damaraju Aug 17 '18 at 06:58
  • @SarathDamaraju As I know, JS client apps usually changes # part without reloading the page. so Safari Mobile is not going to work with this approach ? and is that normal or a bug ? – Pyae Phyo Aung Aug 17 '18 at 09:48
  • 1
    @PyaePhyoAung , Not reloading a page is normal but preventing functionalities like alerts should be considered as a bug unless specified somewhere by safari dev team. – Sarath Damaraju Aug 27 '18 at 11:40
  • Looks like the issue with `alert` method itself. I see it as a call on onclick when recording the timeline, but it does not show anything. As a possible temp solution - reload page on url hash changed - alerts will work until next hash change. – extempl Oct 25 '18 at 08:29
  • Aside from this bug, using the **alert** function is kind of frowned upon these days. It is now customary to use **console.log** for debugging stuff, or creating a custom **z-index**ed popup for displaying information to the user. – raphael75 Dec 06 '18 at 19:09

4 Answers4

2

Could be related to Alert, confirm, and prompt not working after using History API on Safari, iOS and https://forums.developer.apple.com/thread/65054

It seems that alert() becomes undefined. A suggested workaround is to use custom popups instead.

Tzach Ovadia
  • 1,278
  • 9
  • 18
0

Never used a # inside a url other than as a reference to an anchor, but i'm not 100% sure about this... I think that adding a # to the url and pressing enter won't reload the page. The #abc in the url does tell the browser to jump to an anchor named abc and so this will never reload the page or trigger some javascript. If you don't want to jump/scroll to some anchor insite your actual page, don't use # within the url. That should solve your problem.

mhombach
  • 196
  • 11
0

The # in a url is a fragment identifier. It is expecting something to be after the url example: www.yourpage.com/foo.html#bar. This leaves it looking for the bar fragment in your page. The page will not be reloaded.

This might help w3 fragments

Jason Smith
  • 71
  • 4
0

Well, this might be due to the fact that you're not making another http request and instead instructing the browser to go to that said hash of (an example) #abc.

If you had an element of some sorts like this with that id, it would jump to that section of the page.

Example:

<a href="#abc">click to jump down to my section</a>

<p id="abc">my section</p>

I'm assuming when you type #abc in the url, it will be looking for that. Which isn't there, of course.

Other than that, I'm not entirely sure.

Kasador
  • 405
  • 7
  • 18
  • I believe changing or pressing enter in the address bar always makes a new request in any browser. This rule only applies anchors – DerpyNerd May 28 '19 at 12:44