在Drupal iframe中嵌入FullCalendar：如何让事件链接外部打开？

我懂你的需求——现在嵌入的FullCalendar里的事件链接都在iframe内部跳转，想让它们直接在浏览器新标签页或者外部窗口打开对吧？这里有几个可行的解决方案，你可以根据自身情况选择：

方案1：修改FullCalendar的事件渲染逻辑（最推荐） #

如果有权限修改FullCalendar所在页面（Kalender/index.html）的代码，直接在初始化FullCalendar时，通过回调函数给事件链接添加target="_blank"属性。示例代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置项...
    eventRender: function(info) {
      // 定位事件中的链接元素
      var linkEl = info.el.querySelector('a');
      if (linkEl) {
        linkEl.setAttribute('target', '_blank');
        // 可选：添加rel属性提升安全性，防止恶意页面篡改父窗口
        linkEl.setAttribute('rel', 'noopener noreferrer');
      }
    }
  });
  calendar.render();
});

这个方法从源头解决问题，所有动态生成的事件链接都会自动带上外部打开的属性，且没有跨域限制。

方案2：给嵌入页面添加全局脚本自动处理链接 #

如果不想修改FullCalendar的配置，也可以在Kalender/index.html里添加一段脚本，覆盖页面加载后所有链接（包括动态生成的）的打开行为：

// 监听页面内所有链接的点击事件
document.addEventListener('click', function(e) {
  var targetLink = e.target.closest('a');
  if (targetLink && targetLink.href) {
    e.preventDefault();
    // 在新标签页打开链接
    window.open(targetLink.href, '_blank');
    // 若想在父窗口打开，可替换为：window.parent.open(targetLink.href, '_blank');
  }
});

你之前添加的<base target="_blank">没生效，大概率是因为FullCalendar的事件链接是动态创建的，base标签仅对页面初始加载时的元素生效，上面的脚本就能覆盖动态生成的链接场景。

方案3：父页面（Drupal页面）控制iframe链接（仅同域可用） #

如果你的Drupal页面和FullCalendar页面属于同域名，可以在Drupal页面中添加脚本控制iframe内的链接：

document.addEventListener('DOMContentLoaded', function() {
  var calendarIframe = document.querySelector('.embed-container iframe');
  calendarIframe.onload = function() {
    var iframeDoc = calendarIframe.contentDocument || calendarIframe.contentWindow.document;
    // 给iframe内现有链接添加属性
    var existingLinks = iframeDoc.querySelectorAll('a');
    existingLinks.forEach(function(link) {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    });
    // 监听动态生成的链接
    iframeDoc.addEventListener('click', function(e) {
      var targetLink = e.target.closest('a');
      if (targetLink) {
        targetLink.setAttribute('target', '_blank');
      }
    });
  };
});

注意：如果是跨域场景，浏览器的同源策略会阻止父页面访问iframe的DOM，这个方法就不适用了，优先选择前两个方案。

内容的提问来源于stack exchange，提问作者br0ken.pipe