Javascript redirect won't work on mobile

Question

I have a piece of Javascript code (below) that redirects a user to the homepage of my website by opening in a new tab. The issue I'm having is that it doesn't work on mobile.

function redirect(url) {
var win = window.open(url);
win.focus();
}

When I click the button that is supposed to open the new tab, nothing happens but it works on desktop in Opera and Chrome.

Does anyone know how to fix this so it will work on mobile?

Edit: HTML added as per request

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="login.js"></script>
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>

<h2>Modal Login Form</h2>

<button onclick="document.getElementById('id01').style.display='block'"
    style="width: auto;">Login</button>

<div id="id01" class="modal">

    <form class="modal-content animate" method=POST>
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'"
                class="close" title="Close Modal">&times;</span> <img
                src="loginAvatar.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label><b>Username</b></label> <input type="text"
                placeholder="Enter Username" name="username" id="uname" required>
            <script>
                var suppliedUsername = document.getElementById("uname").value;
            </script>

            <label><b>Password</b></label> <input type="password"
                placeholder="Enter Password" name="psw" id = "pword" onChange="verify(document.getElementById('uname').value, document.getElementById('pword').value)" required>
            <script>
                var password = document.getElementById("pword").value;
            </script>
            <button id="loginbutton" onClick="verify(document.getElementById('uname').value, document.getElementById('pword').value)">Login</button>
            <input type="checkbox" checked="checked"> Remember me
        </div>

        <div class="container" style="background-color: #f1f1f1">
            <button type="button"
                onclick="document.getElementById('id01').style.display='none'"
                class="cancelbtn">Cancel</button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
    </form>
</div>

<script>
    // Get the modal
    var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>

Try this link: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/ — tumulr, Dec 06 '17 at 12:04
I tried it on Samsung Internet and Google Chrome on galaxy S8 @Varun — Alex Ritchie, Dec 06 '17 at 12:09
@Alex i also am using the s8+ and its working. Can you post the HTML also — Varun, Dec 06 '17 at 12:12
Yes, I will update the original post to contain the HTML @Varun — Alex Ritchie, Dec 06 '17 at 12:17
The function for new tab is in login.js ? And from where is it called? — Varun, Dec 06 '17 at 12:24
It is called from inside the verify() method in login.js @Varun — Alex Ritchie, Dec 06 '17 at 12:30

score 1 · Accepted Answer · edited Dec 16 '17 at 02:33

1

Just use a link. If you want, you can style it like a button with CSS.

<a href="url" target="_blank">Text</a>`

Why do you have to use fancy Javascript to do something you could otherwise do with a simple link?

And if you need to trigger it within the Javascript code, look at this post. Or if you are using jQuery (which I think you are) look here.

edited Dec 16 '17 at 02:33

Sébastien

11,860
11
58
78

answered Dec 06 '17 at 12:07

kognise

612
1
8
23

Javascript redirect won't work on mobile

1 Answers1