javascriptを使用してGoogle Chromeのブラウザナビゲーションステータスバーを隠す

Question

タッチスクリーンパネルで使用されるフルスクリーンウェブアプリの左下にGoogle Chromeのブラウザナビゲーションステータスバーを無効にしようとしています。私はjQuery用の作業コードを持っていますが、私のコードは純粋なJavaScriptに基づいて使用することはできません。

マウスのホバー上のすべてのhrefタグを削除し、データタグにデータを一時的に保存し、クリックすると、データタグを使用する方法をリンクするようにナビゲートします。

ここでは、そのホバーを無効にしないと表示されません。

JavaScriptでhrefを削除できましたが、後でリンクを追加できませんでした。ここで

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

あなたは、元のリンク情報と、このようなdata-hrefやdata-navigateUrlなどの追加の属性を作成して、マウスがリンクを去るときにそれを復元することができイベントmouseleaveを使用してください。例は第2のフィドルに続く。

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>

今厳密に（同じベースコードwitht a elemetsを使用して）あなたの質問に基づいて、解決策は次のようになります。

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

私の場合にはうまくいくソリューションです。あなたが ``仕事にdocument.getElementsByTagName（ '[HREF]'）を期待するにはどうすればよい

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

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

 
//navigate to data-href 
 
var navigateFunc = function() { 
 
\t 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>