Third party links blocked in iframes

Developing with LiveWhale
1

Hello,

Some of our sites have chosen to iframe in various calendar views/event pages. We recently ran into an issue where some third party links on iframed events pages are not working, as they are blocked from rendering in iframes.

Ex. https://humanrights.institute.uconn.edu/events-calendar/ —> October 29th event, click the “Register on Teams” button link under the image. Same idea with the Nov 17th event.

We’ve never run into this issue before, so I am debating between…

  1. Adding a target=“_blank” atttribute to the anchor tag in the is_online area in the lw_cal_event_detail.html file, which is more of a catch all fix.

  2. Writing a script that references an “approved” list of domains (managed by us) that would add a target=“_blank” attribute to any anchor tags [likely only within an iframe and containing the class name lw_join_online] that contain a href with a domain on that list. (I would prefer having a list as opposed to willy-nilly adding target=“_blank” to everything, partly because this doesn’t come up a lot and partly because I want to see what folks are linking to.)

Before I do any of this, I wanted to see if you had encountered this issue before and if there’s anything you broadly recommend.

2

Hi Janet,

Thanks for posting – interesting, no I haven’t seen or heard of this before. (But, I do think that iframe embeds of LiveWhale Calendars are not super widely used, so that could be why.)

I think your target=“_blank” idea is a good one – my personal recommendation would be to add it to every link inside the calendar when viewing in an iframe. I wouldn’t ever want a link to accidentally be “caught” inside of an iframe.

Here’s one core behavior that might help:

LiveWhale also adds <body class="lwc_iframe"> to the calendar when it detects it’s been loaded inside of an iframe, so you can use body.lwc_iframe {} in your theme CSS if you want to have specific styling for the embedded calendar only. Source in docs

So, incorporating something like

(function ($, livewhale, undefined) {
  var $body = $('body');

  // open links in new tab when iframed
  $body.on('calLoad.lwcal', function (e, controller, data) {
    if ($body.hasClass('lwc_iframe')) {
      $('#lw_cal_events a[href]')
        .not('.lw_cal_event_title a') // keep event links in iframe, if desired
        .not('[href^="#"], [href^="javascript:"]')
        .attr({ target: '_blank', rel: 'noopener' });
    }
  });
})(livewhale.jQuery, livewhale);

into your /_ingredients/themes/global/scripts/calendar-custom.js might be just the ticket.