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

Question

我正在尝试禁用 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:

Answer 1

您可以使用原始 link 信息创建附加属性，例如 data-href 或 data-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>

Answer 2

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

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>

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

hiding browser navigation status bar for google chrome using javascript

javascript

jquery

google-chrome

href