创建“查询参数”时,可以将其指定给容器标记,而不是单独指定给每个“a href”标记

问题描述 投票:0回答:1

创建“查询参数”时,可以将其指定给容器标记,而不是单独指定给每个“a href”标记。

我正在使用菜单[MenuA.html],其中包含许多“a href”链接,每个链接包含相同的“查询参数”。

<a href="./Page1.html?MyRedictedFrom=MenuA">MenuA Child Page1</a>
<a href="./Page2.html?MyRedictedFrom=MenuA">MenuA Child Page2</a>
<a href="./Page3.html?MyRedictedFrom=MenuA">MenuA Child Page3</a>
......etc.

是否可以省去必须为每个人'a href'链接添加“?MyRedictedFrom = MenuA”'查询参数“,而是做三件事之一?(A - 好)全局页面,声明所有'一个href'点击时附加那个常见的'查询参数'。(B-better)仅限于一个容器,比如'article tag',只包含在该容器中的所有'a href'追加所需的共同点'查询参数'。(C-best)鉴于我使用了更多的一组'nav tag'容器[链接的内容部分,以及每个包含在'nav tag(s)'中的网站导航链接的另一个底部部分]如果可能的话,最好的解决方案是将'a href'作为目标,只在其中一个'nav tag'部分中进行。

感恩@CertainPerformance。我希望不要重做那些给定的单个公共子页面上的工作代码,我知道这些子页面可以从父MenuA或父MenuB中调用。但是,回到我在这个上下文中的初始问题,使用已经工作的传出'查询参数'字符串(现在单独添加到每个父母'a href'),我只希望选择(A)或(B)或( C)通过页面加载本身或通过将其指定给标记容器来自动设置“查询参数”字符串。由于评论有限,我会将目前的工作代码添加到我的问题区域。

z Menoua。 HTML

<!doctype html>
<html>
<head>
<title>zMenuA.html [Acknowledgement @Andu Andrici]</title>
</head>
<body>

<article>
<nav>

<a href="./zSameTarget.html?redictedFrom=zMenuA">zMenuA.html invoking zSameTarget.html</a>
<!-- other links as well -->

</nav>
</article>

<nav></nav>
</body>
</html>

zMenuB.html几乎是zMenuA的副本,除了其附加的'查询参数'字符串将是:?redictedFrom = zMenuB。它是zMenuA和zMenuB我希望修改为将参数字符串添加到(A-good)文档onload,或者(B-better)article标签,或者(C-best)第一个nav标签。

在这种情况下,普通孩子似乎不需要改变,并在下面的功能工作完成中显示:

<!doctype html>
<html>
<head>
<title>zSameTarget.html [Acknowledgement @Andu Andrici]</title>
<style></style>

<script type="text/javascript">
    var MyAppendedUrlMarker = window.location.search

    if (MyAppendedUrlMarker === '?redictedFrom=zMenuA') {
    onload = function () {
        var MyElement = 
document.getElementById("MyDisplayOnOff0").style.display = "inline";
        var MyElement = 
document.getElementById("MyDisplayOnOff1").style.display = "none";
        }
    }
    if (MyAppendedUrlMarker === '?redictedFrom=zMenuB') { 
    onload = function () {
        var MyElement = 
document.getElementById("MyDisplayOnOff0").style.display = "none";
        var MyElement = 
document.getElementById("MyDisplayOnOff1").style.display = "inline";
        }        
    }
</script>

</head>

<body>

<p style="white-space:pre-wrap;">
This is the child page 'zSameTarget.html' with this content showing 
the same; BUT, at the bottom, with different content [a navigation link] 
being visible and active, solely dictated by which parent page invoked 
this page. To whit, whether in opening this page, an [a href ....] was 
clicked on 'zMenuA.html', or if it came from a click originating from 
'zMenuB.html' instead. NOTE: running this page alone will show two links. 
It is meant to show only one link. Therefore, first open 'zMenuA.html' 
or 'zMenuB.html' and then link to this page from either one of them. As
indicated, depending on the page chosen, one will find it has produced a 
different content [link in this case] visible at the bottom.</p><br/>

    <div>
<a id="MyDisplayOnOff0" href="./Menu%20-%20Rivers%20of%20Mind%20and%20Heart.html">Rivers of Mind and Heart</a> 
<br/>
<a id="MyDisplayOnOff1" href="./Menu%20-%20Of%20Lila%20and%20the%20Void.html">Of Lila and the Void</a> 
    </div>

</body>
</html>
html
1个回答
1
投票

使用Javascript,您可以考虑使用事件委派 - 当单击特定容器中的a时,在SessionStorage中保存该容器的名称(如MenuA),然后您可以尝试在另一页上检索该SessionStorage值。例如:

document.addEventListener('click', ({ target }) => {
  if (!target.matches('.menu > a')) {
    return;
  }
  const menuName = target.parentElement.id;
  alert('Clicked on ' + menuName);
  sessionStorage.redirectedFrom = menuName;
});
<div id="MenuA" class="menu">
  <a href="./Page1.html">MenuA Child Page1</a>
  <a href="./Page2.html">MenuA Child Page2</a>
  <a href="./Page3.html">MenuA Child Page3</a>
</div>
<div id="MenuB" class="menu">
  <a href="./Page1.html">MenuB Child Page1</a>
  <a href="./Page2.html">MenuB Child Page2</a>
  <a href="./Page3.html">MenuB Child Page3</a>
</div>

然后,在每个子页面上,在页面加载时,检查qazxsw poi中是否有东西:

redirectedFrom

如果查询参数由服务器使用,而不是由客户端使用,那么您可以改为更改const { redirectedFrom } = sessionStorage; // do something with redirectedFrom, if it exists sessionStorage.removeItem('redirectedFrom'); onclick:

href
document.addEventListener('click', ({ target }) => {
  if (!target.matches('.menu > a')) {
    return;
  }
  const menuName = target.parentElement.id;
  const newHref = `${target.href}?redirectedFrom=${menuName}`;
  target.href = newHref;
  alert('Clicked on ' + menuName + ', redirecting to ' + newHref);
});
© www.soinside.com 2019 - 2024. All rights reserved.