显示解析的 URL 值

Question

在将头撞在屏幕上几个小时后，我被卡住了。我希望有更多知识的人可以帮助我。我的最终目标是获取解析后的 URL 参数并将它们显示在我的 Wordpress 页面的正文中。示例 URL 可能是“www.urlexample.com/?var1=red&var2=shoes”。

如果我检查我的页面，我可以在会话存储中看到键/值对显示。例如，我会看到带有 value="red" 的 key="var1"。所以这意味着这意味着javascript正在工作。现在如何在我的页面正文中显示它？例如; “你最喜欢的颜色是红色”（红色是 var1）

<!-- URL Parse Code -->
<script>
    var queryForm = function(settings) {
        var reset = settings && settings.reset ? settings.reset : false;
        var self = window.location.toString();
        var querystring = self.split("?");
        if (querystring.length > 1) {
            var pairs = querystring[1].split("&");
            for (i in pairs) {
                var keyval = pairs[i].split("=");
                if (reset || sessionStorage.getItem(keyval[0]) === null) {
                    sessionStorage.setItem(keyval[0], keyval[1]);
                }
            }
        }
        var hiddenFields = document.querySelectorAll("input[type=hidden]");
        for (var i=0; i<hiddenFields.length; i++) {
            var param = sessionStorage.getItem(hiddenFields[i].name);
            if (param) document.getElementById(hiddenFields[i].name).value = param;
        }
    }
    queryForm();
</script>
<!-- URL Parse Code -->

Answer 1

不确定这是否是您在 Brett 上面的问题中提出的问题。

const EnteringURL = 'https://example.com/?campaign=vcampaign&src=vsrc';
// const urlObject = new URL(EnteringURL);
// const host = urlObject.host;
// const href = urlObject.href console.log(host) console.log(href) let url = new URL(EnteringURL);
// let params = new URLSearchParams(url.search.slice(1));
// console.log(url.searchParams.get('campaign'));

const mapParams = (p) => Array.from(p.keys()).map(k => `<li>${k} - ${p.get(k)}</li>`).join('');

const mapLoad = (url) => {
  const { host, href, search } = new URL(url);
  const params = new URLSearchParams(search.slice(1));
  document.querySelector('.mapped').innerHTML = `
    <div class="url">URL - ${href}</div>
    <div class="host">HOST - ${host}</div>
    <div class="href">SEARCH - ${search}</div>
    <ul class="params">
      ${mapParams(params)}
    </ul>
  `; 
};

const loadIntoHTML = (url) => {
  const { host, href, search } = new URL(url);
  const params = new URLSearchParams(search.slice(1));
  document.querySelector('.href').innerHTML = encodeURI(href);
  document.querySelector('.host').innerHTML = host;
  document.querySelector('.search').innerHTML = search;
  document.querySelector('.params').innerHTML = mapParams(params);
};

const loadIntoHiddenForm = (url) => {
  const { host, href, search } = new URL(url);
  const params = new URLSearchParams(search.slice(1));
  const campaign = params.get('campaign');
  const src = params.get('src');
  document.querySelector('#href').value = encodeURI(href);
  document.querySelector('#host').value = host;
  document.querySelector('#search-params-campaign').value = campaign;
  document.querySelector('#search-params-src').value = src;
};

document.querySelector('.show').addEventListener('click', () => {
  document.querySelector('.hidden-fields').classList.toggle('hide');
});

loadIntoHiddenForm(EnteringURL);
loadIntoHTML(EnteringURL);
mapLoad(EnteringURL);

.hidden-fields, .mapped, .loaded {
  border: 2px solid #000;
  border-radius: 7px;
  margin-bottom: 2rem;
}

.hidden-fields input[type="text"] {
  display: block;
  font-weight: bold;
  margin: 0.25rem;
  min-width: 375px;
}

.hide {
  display: none;
}

<h2 class="show">Hidden Forms Fields (Click to show)</h2>
<div class="hidden-fields hide">
  <input type="text" id="href" />
  <input type="text" id="host" />
  <input type="text" id="search-params-campaign" /> 
  <input type="text" id="search-params-src" /> 
</div>

<h2>Build the HTML</h2>
<div class="mapped">

</div>

<h2>Load into HTML</h2>
<div class="loaded">
  <div class="href"></div>
  <div class="host"></div>
  <div class="search"></div>
  <ul class="params"> 
  </ul>
</div>

Answer 2

如果变量和值在会话存储中：

var el = document.getElementById('elementid'); /// get the element on body by its id. 
el.innerHTML = sessionStorage.getItem('key'); /// get the value by key and set the text in the element

https://codepen.io/fernandosiebra/pen/NWPPjoO