hiding browser navigation status bar for google chrome using javascript

Question

I'm trying to to disable google chrome browser navigation status bar on the bottom left for a full screen web app that will be used on touch screen panel. I have a working code for jQuery but I can't use that since my code based on pure JavaScript.

Only workaround find is to remove all href tags on mouse hover, keep the data temporarily on a data tag and once it's click navigate to link as how it is suppose to be using the data tag.

here is how it looks like without disabling it once its hover.

I was able to remove the href with JavaScript but couldn't add the links afterwards.

var linksAhref = document.getElementsByTagName('a'); 
var linksData = document.getElementsByTagName('[href]'); 
     
var replaceFunc = function() {
    for (var i = 0; i < linksAhref.length; i++) { 
        var href = linksAhref || linksData;
        // console.log(href);
        linksAhref[i].removeAttribute("href");
        // window.location.href = href;
    }
};

for (var i = 0; i < linksAhref.length; i++) { 
    linksAhref[i].addEventListener('mouseover', replaceFunc);
}

<ul>
    <li><a href="link-1">Link 1</a></li>
    <li><a href="link-2">Link 3</a></li>
    <li><a href="link-3">Link 4</a></li>
    <li><a href="link-4">Link 5</a></li>
</ul>

Here is the code that works in jQuery: jsfiddle:

Answer 1

You could create an additional attribute such as data-href or data-navigateUrl with the original link information and restore it when the mouse leaves the link using the event mouseleave. Example follows in second fiddle.

If you actually use jQuery the code will get much simpler.

Be aware that the user can see the target url anyway, by viewing the source code of your page.

Your solution would have a better performance in this case you want any HTML to be clickable and navigate to the desired destination. You wouldn't have to add and remove a's href everytime. The solution would be way simpler:

 $('[data-navigateUrl]').click(navigate);

function navigate() {
  window.location.href = this.getAttribute('data-navigateUrl');
}

function navigatehRef(element) {
  window.location.href = element.getAttribute('data-href');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span onclick="navigatehRef(this)" data-href="link.htm"> Link 1 (with inline function call), attribute is <b> data-href</b></span> 
  </li>
  <li>
    <span onclick="window.location.href='link2.htm'"> Link 2 (inline redirect), <b>no data-...</b> attribute </span> 
  </li>
  <li>
    <span data-navigateUrl="link3.htm"> Link 3 with function call updated by jQuery at startup, attribute is <b> data-navigateUrl</b></span> 
  </li>
</ul>

Now based strictly on your question (using a elemets witht the same base-code), the solution would be:

var linksAhref = document.getElementsByTagName('a');


var replaceFunc = function() {
  for (var i = 0; i < linksAhref.length; i++) {

    linksAhref[i].removeAttribute("href");
  }
};
var restoreLinkFunc = function() {
  for (var i = 0; i < linksAhref.length; i++) {
    linksAhref[i].setAttribute("href", linksAhref[i].getAttribute("data-href"));

  }
};


var clickFunc = function() {
  window.location.href = this.getAttribute("data-href");
};

for (var i = 0; i < linksAhref.length; i++) {
  linksAhref[i].addEventListener('mouseover', replaceFunc);

  linksAhref[i].addEventListener('mouseleave', restoreLinkFunc);
  linksAhref[i].addEventListener('click', clickFunc);
}

<ul>
  <li><a href="link-1" data-href="link-1">Link 1</a>
  </li>
  <li><a href="link-2" data-href="link-2">Link 3</a>
  </li>
  <li><a href="link-3" data-href="link-3">Link 4</a>
  </li>
  <li><a href="link-4" data-href="link-4">Link 5</a>
  </li>
</ul>