通过 URL 变量的动态元标记

Question

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

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

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

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

<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 and/or location.search？）但我不知道如何实现它。

Answer 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);
}

Answer 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>

通过 URL 变量的动态元标记

Dynamic Meta Tags via URL Variables

html

javascript

meta-tags