使用 javascript 隐藏 google chrome 的浏览器导航状态栏

hiding browser navigation status bar for google chrome using javascript

我正在尝试禁用 google chrome 左下角的浏览器导航状态栏,以获取将在触摸屏面板上使用的全屏网络应用程序。我有 jQuery 的工作代码,但我不能使用它,因为我的代码基于纯 JavaScript.

唯一的解决方法是删除鼠标悬停时的所有 href 标签,将数据暂时保留在数据标签上,点击后导航到 link,因为它应该如何使用数据标签。

这是悬停后未禁用它的样子。

我可以使用 JavaScript 删除 href,但之后无法添加 link。

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>
这是在 jQuery 中工作的代码:jsfiddle:

您可以使用原始 link 信息创建附加属性,例如 data-hrefdata-navigateUrl,并在鼠标离开 link 时使用事件 mouseleave。第二个示例如下 fiddle.

如果你真的使用 jQuery 代码会变得更简单。

请注意用户无论如何都可以通过查看您页面的源代码来查看目标url。

在这种情况下,您的解决方案会有更好的性能,您希望任何 HTML 都可以点击并导航到所需的目的地。您不必每次都添加和删除 a 的 href。解决方案会更简单:

 $('[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>

现在严格根据您的问题(使用具有相同基本代码的 a 元素),解决方案是:

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>

我找到了适合我的情况的解决方案。

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

//remove actual href's and set their data to data-href instead
var replaceFunc = function() {
 var href = this.getAttribute("href");
  this.removeAttribute("href");
 this.setAttribute('data-href', href);
};

//navigate to data-href
var navigateFunc = function() {
  window.location = this.getAttribute('data-href');
};

//href will be removed once link is hovered
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener('mouseover', replaceFunc);
}

//on click it will navigate url stored in data-href
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener('click', navigateFunc);
}
<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>