是否可以检测页面是否通过导航栏打开?

时间:2021-04-12 18:01:15

标签: javascript html css

是否可以通过我的导航栏检测页面是否打开? 我有我的学校项目的脚本,可以打开导航栏。它看起来像这样:

function openNav() {
    document.getElementById("navbar").style.width = "14%";
    document.getElementById("main").style.marginLeft = "14%";
  }
  

function closeNav() {
    document.getElementById("navbar").style.width = "0%";
    document.getElementById("main").style.marginLeft = "0%";
  }

它会打开我的导航栏,然后我选择要访问的网站。 这是 html 的导航栏部分。

<script src="navbar.js"></script>
    <div id="navbar" class="sidebar">
        <a href="index.html" class="closebtn" onclick="closeNav()">&times;</a>
        <a class="active" href="index.html">Kvantový počítač</a>
        <a href="Double slit experiment.html" onclick="scriptDec()">Youngov experiment</a>
        <a href="Qbit.html">Qubit a superpozícia</a>
    </div>

它会将我带到网站并关闭导航栏。我想打开导航栏。有没有可能让它打开

2 个答案:

答案 0 :(得分:1)

<块引用>

点击链接会关闭导航栏,然后将用户带到另一个网站。有没有办法让导航栏保持打开状态?

Ans:您可以做的一件事是设置 target = "_blank"。这将在新选项卡或窗口中打开链接,使您的导航栏在其自己的选项卡或窗口中保持不变。像这样...

<a href = "https://www.google.com" target = "_blank"> google </a>

<块引用>

是否可以通过我的导航栏检测网站是否已打开?

回答:是的!有几种方法可以做到这一点。

Soln1:使用“cookies”。网页使用 Cookie 来存储和检索用户计算机上的信息。当用户离开您的网站时,cookie 不会被销毁。因此,当用户再次访问您的网站时,您可以检查用户的计算机是否已经拥有您的网站之前设置的 cookie。

Soln2:以类似的方式使用 window.localStorage。但是在这里您必须最终使用 window.clear() 手动删除信息。点击链接后,每当用户返回您的网站时,他/她都可以查看他/她点击了哪个链接。试试看!

<p id="pp"></p>
<a href="http://www.google.com" onclick="addSiteToCookie('www.google.com')">
      www.google.com
    </a>
<br/>
<a href="http://www.geeksforgeeks.org" onclick="addSiteToCookie('www.geeksforgeeks.org')">
      www.geeksforgeeks.org
    </a>
<br/>
<button onclick="localStorage.clear()"> Clear </button>
<button onclick="display_visited()"> Display visited URLs</button>
<script defer>

  /* THE FUNCTION THAT YOU NEED */
  function addSiteToCookie(site_name) {
    if (localStorage.getItem("sites_visited") == null) {
      localStorage.setItem("sites_visited", site_name);
    } else {
      var prev_visits = localStorage.getItem("sites_visited");
      prev_visits = prev_visits + ";" + site_name;
      localStorage.setItem("sites_visited", prev_visits);
    }
  }

  function display_visited() {
    document.getElementById("pp").innerHTML =
      "sites_visited = " + localStorage.getItem("sites_visited");
  }
</script>

答案 1 :(得分:0)

当然,例如,如果您在 URL 中使用 ?source=navbar 使用 Google Analytics 跟踪网站流量,Google Analytics 可以看到该请求是从 Navbar 交互中创建的。

你可以这样做:

<div id="navbar" class="sidebar">
    <a href="index.html?source=navbar" class="closebtn" onclick="closeNav()">&times;</a>
    <a class="active" href="index.html?source=navbar">Kvantový počítač</a>
    <a href="Double slit experiment.html?source=navbar" onclick="scriptDec()">Youngov experiment</a>
    <a href="Qbit.html?source=navbar">Qubit a superpozícia</a>
</div>

因此,您只需在后端服务器中或通过 JS 进行检查即可。