如何在Swal弹窗text属性中配置带href的Continue跳转链接

原有代码的问题根源 #

• 代码里当前使用的text属性，是Swal专门用来渲染纯文本内容的，内部会自动对传入字符串做HTML转义处理，哪怕你拼接了<a>标签，最终页面上也只会显示带尖括号的纯文本，根本不会渲染成可点击的跳转链接。
• 原有代码还有个小笔误：拼接a标签href属性的时候多写了一个双引号，就算换了能解析HTML的属性，这个结构错误也会导致链接失效。

正确实现步骤 #

1. 把原配置里的text属性替换成html属性，这个属性才允许Swal解析传入内容里的合法HTML标签。
2. 修正a标签的引号笔误，给跳转链接加上必要的安全属性。
3. 如果你使用的是SweetAlert2（也就是现在主流的新版Swal），旧版的type配置项已经被废弃，要换成icon参数，不然会触发控制台警告。

修正后的完整可运行代码 #

$.ajax({
    type: 'GET',
    dataType: 'text',
    url: 'api/generate.php?type=links',
    success: function(data) {
        Swal.fire({
            icon: 'success',
            title: 'Here is your account',
            html: `<a href="${data}" target="_blank" rel="noopener noreferrer">Continue</a>`
        });
    }
});

注意事项 #

• 跳转链接加上target="_blank"打开新窗口时，一定要配套加rel="noopener noreferrer"，避免新窗口的安全漏洞，这是前端开发的通用规范。
• 往html属性里塞的内容要确保来源可信，未经校验的用户输入内容直接拼进去会有XSS注入风险，你这里的跳转链接是后端接口直接返回的自有地址，不存在这个问题。
• 不要尝试硬往text属性里塞HTML内容，这个设计本身就是用来做纯文本展示的，无论怎么写都不会解析标签，没必要在这上面浪费时间。

内容的提问来源于stack exchange，提问作者KokoD3veloper