将 URL 参数拉入 WordPress“原始 HTML”内容元素

Posted 2023-02-22

【中文标题】将 URL 参数拉入 WordPress“原始 HTML”内容元素

【英文标题】：Pull URL parameters into a WordPress "Raw HTML" content element

【发布时间】：2020-09-09 22:45:23

【问题描述】：

我正在使用 URL Params 插件将参数提取到使用短代码的常规内容中。但我必须使用 Raw html 块将 Typeform 代码插入页面，并且我希望能够将 URL 参数传递到 Typeform 代码中以跟踪表单提交的来源。

我不知道该怎么做。该表单在以下位置运行良好：https://HelloExit.com/instant-valuation

但我希望能够将人发送到https://HelloExit.com/instant-valuation/?source=XXXX 并将 XXXX 作为“data-url”中的“源”值拉入 Typeform 代码

这是我尝试过的：

<script>
  function getUrlVars() 
    var vars = ;
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) 
      vars[key] = value;
    );
    return vars;
  
  var source = getUrlVars()["source"];
</script>
    
<div
  class="typeform-widget"
  data-url="https://xgenius.typeform.com/to/zZHPPk?source=<script>document.write(source)</script>"
  data-transparency="100"
  data-hide-headers=true
  data-hide-footer=true
  style="width: 100%; height: 500px;">
</div>
    
<!-- Typeform embed code -->
<script>(function()  var qs,js,q,s,d=document, gi=d.getElementById, 
ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", 
b="https://embed.typeform.com/"; if(!gi.call(d,id))  js=ce.call(d,"script"); js.id=id; 
js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q)  )() 
</script><div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5;padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=zZHPPk&utm_source=typeform.com-01D8JVB4T91A26RA6WEZRZVF05- pro&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a></div>

任何帮助将不胜感激！

【参考方案1】：

您已经接近了，但您需要使用 javascript 来更改您的 div 的 data-url 属性。

// ...
var source = getUrlVars()["source"];

// concatenate the url with your source variable
var newUrl = `https://xgenius.typeform.com/to/zZHPPk?source=$source`;

// get the element whose attributes you want to dynamically set
// https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
var widgetElement = document.querySelector('.typeform-widget');

// set the source attribute
// https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
widgetElement.setAttribute('data-url', newUrl);

请仔细测试，因为它可能仍会以竞争条件结束（也就是说，Typeform 嵌入代码可能会在您更新它引用的 data-url 属性之前开始运行）。

【讨论】：

完全有效！视图源显示硬编码的 URL，但它在后台工作。谢谢你，煨！！

太棒了！顺便说一句，View Source 总是会显示原始 HTML。要查看动态更改后的属性，请尝试右键单击相关元素并选择Inspect Element。