如何实现WeTransfer Plus的iframe链接在新窗口/标签页打开？

Since WeTransfer hasn’t rolled out official target="_blank" support for their embedded iframes yet, here are two reliable workarounds you can implement right now:

Workaround 1: Wrap the Iframe in a Positioned Anchor Link #

This method creates an invisible clickable layer over your iframe that triggers the link in a new tab. It’s straightforward and doesn’t require JavaScript.

<div style="position: relative; display: inline-block;">
  <!-- Invisible anchor covering the iframe -->
  <a 
    href="https://web.site/send/LANGUAGE/PROFILE_NAME" 
    target="_blank" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"
    aria-label="Open WeTransfer page in new tab"
  ></a>
  <!-- Your original WeTransfer iframe -->
  <iframe 
    src="https://web.site/send/LANGUAGE/PROFILE_NAME" 
    width="WIDTH" 
    height="50" 
    frameborder="0"
  ></iframe>
</div>

How it works: #

• The <div> acts as a relative positioning container for the anchor and iframe.
• The <a> tag is absolutely positioned to cover the entire iframe area, with a higher z-index to ensure it captures clicks first.
• The aria-label adds accessibility for screen readers, explaining what the link does.

Workaround 2: JavaScript Click Listener #

If you prefer a JS-based approach, attach a click event directly to the iframe that opens the target URL in a new tab. This works because click events on the iframe element itself fire even if cross-origin restrictions prevent access to the iframe’s internal content.

Inline JavaScript: #

<iframe 
  src="https://web.site/send/LANGUAGE/PROFILE_NAME" 
  width="WIDTH" 
  height="50" 
  frameborder="0"
  onclick="window.open(this.src, '_blank')"
></iframe>

Unobtrusive JavaScript (Recommended): #

For cleaner code, separate the JS from your HTML:

<iframe 
  id="wetransferEmbed"
  src="https://web.site/send/LANGUAGE/PROFILE_NAME" 
  width="WIDTH" 
  height="50" 
  frameborder="0"
></iframe>

<script>
document.getElementById('wetransferEmbed').addEventListener('click', function() {
  window.open(this.src, '_blank');
});
</script>

Note: #

In rare cases, if WeTransfer’s internal code stops event propagation, this method might not work for clicks on specific elements inside the iframe. But for most standard use cases, it should reliably trigger the new tab.

Both solutions are temporary fixes until WeTransfer launches their official feature. Be sure to test them in your target browsers to confirm they work as expected.

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