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.

Is this iOS Safari known issue?

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

$(".button").click(function () {
  alert('Hello');
});

<script src=".2.3/jquery.min.js"></script>
<input class="button" type="button" value="alert" />

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.

Is this iOS Safari known issue?

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

$(".button").click(function () {
  alert('Hello');
});

<script src="https://ajax.googleapis./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

• javascript
• iphone
• browser
• safari
• alert

• Can you add your button html and the js code to trigger the alert? – Vinod Bhavnani Commented Jan 19, 2018 at 9:19
• 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 Commented Jan 19, 2018 at 9:55
• 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 Commented Mar 14, 2018 at 22:14
• 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 Commented Aug 17, 2018 at 6:58
• 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 Commented Aug 27, 2018 at 11:40

4 Answers 4

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

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

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.

The # in a url is a fragment identifier. It is expecting something to be after the url example: www.yourpage./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

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.