通过 if else 语句更改正文 - url

Question

如果 url 是子域 http://one.example.com/dsnknw?211218 则显示 div 1，如果 http://two.example.com/ppppnw?201218 则显示 div 2。

每个身体都有背景图片

<style>
#siteone {
background: url(http://example.info/backgroundone.PNG); 
    background-repeat: no-repeat;
    background-size:cover;
    }
#sitetwo {
    background: url(http://example.info/backgroundtwo.PNG); 
    background-repeat: no-repeat;
    background-size:cover;
    }
</style>

以及相关的链接：

<div id="one">
<a id="link1" href="https://click.com" target="_top"></a>
</div>

<div id="two">
<a id="link2" href="https://click2.com" target="_top"></a>
</div>

我尝试了一些代码，包括

document.getElementById("body")

Class of ID Change based on URL - URL Based Image Swap - Creating Conditional Statement Based On Page URL 等

Answer 1

根据 Juan 的评论，两个 body 标签不是一个可行的方法。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Sectioning_root。您应该改用父包装器。

<div class="parent">
<a id="link2" href="https://click.com" target="_top"></a>
</div>

使用window.location 将帮助您解析当前 URL，以便您可以正确地做您需要的事情。

我要做的是查询具有window.location.href href 属性的元素，然后获取.parentElement 以获取直接父级。

const url = window.location.href;
const targetParent = document.querySelector('.parent a[href="' + url + '"]').parentElement;

targetBody.style.display = "block";

如果<a> 位于更深处，这将不起作用。既然如此，我会说为父级添加另一个属性，以便我们可以直接查询它。

<div class="parent" url="https://click.com">
<a id="link2" href="https://click.com" target="_top"></a>
</div>

然后

const url = window.location.href;
const targetParent = document.querySelector('.parent[url="' + url + '"]').parentElement;

如果您的网址有其他额外的字符串，例如http://click.com?id=foobar，那么这也不起作用。您必须手动连接来自 window.location 的其他属性，这样您才能获得所需的内容。

const baseDomainWithSubPath = window.location.origin + "/" + window.location.pathname;
const baseDomain = window.location.origin;
const subDomain = window.location.pathname;