如何让FullCalendar模态弹窗中的URL可点击并在新标签页打开

问题根源在于你使用jQuery.text()渲染内容——这个方法会把所有HTML标签转义成纯文本，导致你写的<a>标签只会显示成字符串，无法成为可点击的链接。换成jQuery.html()方法就能正确解析HTML标签，下面是具体实现方案：

1. 修改弹窗内容渲染逻辑 #

在FullCalendar的eventClick回调中，构造包含可点击链接的HTML内容，通过html()方法插入到弹窗容器：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他日历配置项...
    eventClick: function(info) {
      // 从事件数据中提取字段（根据你的JSON结构调整）
      var eventUrl = info.event.extendedProps.url;
      var eventTitle = info.event.title;
      var eventDetail = info.event.extendedProps.detail;

      // 构造带跳转属性的HTML内容，同时做XSS防护
      var popupContent = `
        <h4>${$('<div>').text(eventTitle).html()}</h4>
        <p>${$('<div>').text(eventDetail).html()}</p>
        <p>外部链接：<a href="${encodeURIComponent(eventUrl)}" target="_blank" rel="noopener noreferrer">点击打开</a></p>
      `;

      // 将内容插入弹窗容器（替换成你的弹窗内容容器ID）
      $('#modalContent').html(popupContent);
      // 打开模态框（根据你使用的模态框框架调整，比如Bootstrap的modal方法）
      $('#eventModal').modal('show');
    }
  });
  calendar.render();
});

2. 核心注意事项 #

• 替换text()为html()：text()会转义所有HTML字符，html()则会解析标签并渲染成对应元素。
• 防XSS攻击：对用户输入的文本（如标题、详情）用$('<div>').text(内容).html()转义特殊字符；对URL用encodeURIComponent()处理，避免注入恶意代码。
• 新标签页打开：给<a>标签添加target="_blank"，同时加上rel="noopener noreferrer"提升安全性，防止钓鱼风险。

3. 自定义模态框适配 #

如果你的模态框不是Bootstrap这类现成框架，核心逻辑不变：构造包含<a>标签的HTML字符串，用html()方法插入到模态框的内容区域即可。

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