将 javascript 变量插入交易电子邮件中的 href 链接答案

【问题标题】：Insert javascript variables into a href link within a transactional email将 javascript 变量插入交易电子邮件中的 href 链接
【发布时间】：2019-09-05 10:15:07
【问题描述】：

我正在尝试为交易电子邮件构建一个包含一些 javascript 变量和静态文本的 href url 链接。但是，我无法将链接或显示的 URL 显示为完整的构建 URL。

我尝试将它们都用单引号和其他一些变体括起来，但 URL 和显示的 URL 将无法正确显示。谁能帮忙解决这个问题？

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

HTML

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p style="margin: 0;"><a href='"https://example.com/ + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"' target="_blank">'"https://example.com/" + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"'</a></p>

【问题讨论】：

你不能把 JavaScript 变量放在这样的 href 中，HTML 不知道什么是 JS 变量或者只是纯文本（在这种情况下），你必须制作字符串在 JS 中向上，然后更改 <a> 标记上的值或插入它。
这不是您使用 JavaScript 或操作 DOM 元素的方式。这可能会对您有所帮助：codepen.io/ronv83/pen/wXBMpa。但更一般地，我建议您学习基本的 JavaScript / DOM 教程，因为您似乎不了解基本概念
@ADyson，等等，没有 Jquery？
让我们退后一步 - 这是您发送的电子邮件，而不是硬编码您尝试将 javascript 添加到将修改 URL 的 email 的链接。不要那样做。您的电子邮件生成部分应该能够重写该 url，而不是依赖电子邮件查看器来支持必要的 javascript。
@George 我知道，太棒了不是吗哈哈 :-)

标签： javascript html transactional-email

【解决方案1】：

你的连接有问题

href='"https://example.com/ + folder +
                           |___________  Here you should have `"`

您可以简单地使用Template literals

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

let link = `<p style="margin: 0;"><a href='"https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg' target="_blank">https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg</a></p>`

document.querySelector('#link').innerHTML = link

console.log(link)

&lt;div id='link'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

最好的解决方案是使用template literal 创建端点，然后使用另一个创建 HTML。那么您就不必担心所有的报价及其顺序：

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

const endpoint = `https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg`;
const href = `<a href="${endpoint}" target="_blank">${endpoint}</a>`;

document.querySelector('.link').insertAdjacentHTML('beforeend', href);

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p class="link" style="margin: 0;"></p>

【讨论】：

【解决方案3】：

你可以试试这个：

<p style="margin: 0;">
   <a id="myLink" href='' target="_blank">""</a>
</p>

 <script type="text/javascript">
     var folder = "orders";
     var orderNumber = "589";
     var refNum = "Mon";
     var job = "image";

     var myLink = document.getElementById("myLink");
     myLink.href = "https://example.com/" + folder 
              + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg";

     myLink.innerHTML = myLink.href;
 <script>

如果您希望它简洁通用，那么模板化是您的最佳选择。否则你可以试试这个好的旧 JS 方式。

【讨论】：