通过 URL 变量的动态元标记答案

【问题标题】：Dynamic Meta Tags via URL Variables通过 URL 变量的动态元标记
【发布时间】：2022-01-10 03:42:28
【问题描述】：

如果您能帮助解决这个问题，我将不胜感激。

我在 HTML 标头中有一堆元标记，需要将它们的内容映射到 URL 中的变量。例如，如果我们有这个 URL：

http://example.com?bofn=Dave&boln=Nate&boem=Pat&botn=Taylor&bstn=Chris&lstn=Rami

我们希望标题中的元标记如下所示：

<meta name="bofn" content="Dave">
<meta name="boln" content="Nate">
<meta name="boem" content="Pat">
<meta name="botn" content="Taylor">
<meta name="bstn" content="Chris">
<meta name="lstn" content="Rami">

根据我在网上找到的内容，这可能会使用 javascript 来运行（URLSearchParams 和/或 location.search？），但我不知道如何实现。

【问题讨论】：

请问您为什么要这样做？元标记通常由不执行 JavaScript 的机器人/蜘蛛读取，因此使用 JavaScript 创建它们是没有意义的。
我正在使用以这种方式使用元标记的第三方软件。我知道这不正常，但很遗憾我没有其他选择。

标签： javascript html meta-tags

【解决方案1】：

将 URL 字符串拆分为变量及其值，然后遍历它们并为每个新元元素创建。

var str = 'http:example.com?bofn=Dave&boln=Nate&boem=Pat&botn=Taylor&bstn=Chris&lstn=Rami';

// split('?')[1] takes all after '?' (removes http://example.com)
// split('&') creates array ('bofn=Dave', 'boln=Nate', ...)
var parts = str.split('?')[1].split('&');

// go through all variables
for (let i = 0; i < parts.length; i++) {
    // create new HTML element
    var el = document.createElement('meta');
   
    // split key, value
    var keyval = parts[i].split('=');

    // set name and content attributes, fill values in
    el.name = keyval[0];
    el.content = keyval[1];
    
    // append meta elements to head
    document.getElementsByTagName('head')[0].appendChild(el);
}

【讨论】：

我在w3 space 上对其进行了测试，但没有运气。我尝试将脚本放在正文和标题中，保留和删除元标记，并将初始 var 替换为：var url = new URL('https://shamrockform.w3spaces.com/index.html?bypass-cache=18070630&botn=Ringo'); var str = new URLSearchParams(url.search);
我能够修复部分问题，但只能获取代码以查看放入第一个变量字符串中的 URL，而不是实际的 URL。
@ShamrockJedd 当前 URL 位于 window.location。

【解决方案2】：

在 Pavel 的帮助下，我将 URL 替换为 window.location.href，从而解决了这个问题：

<script>
var str = window.location.href;

// split('?')[1] takes all after '?' (removes http://example.com)
// split('&') creates array ('bofn=Dave', 'boln=Nate', ...)
var parts = str.split('?')[1].split('&');

// go through all variables
for (let i = 0; i < parts.length; i++) {
    // create new HTML element
    var el = document.createElement('meta');
   
    // split key, value
    var keyval = parts[i].split('=');

    // set name and content attributes, fill values in
    el.name = keyval[0];
    el.content = keyval[1];
    
    // append meta elements to head
    document.getElementsByTagName('head')[0].appendChild(el);
}
</script>

【讨论】：

至少，你可以投票赞成帕维尔的回答，因为他做出了巨大的贡献。