Sometimes, a system presents a limitation of basic HTML functionality. In this instance, a link, element or component is restricted in how a link's initial target window is set (i.e. target="_blank" as default) and then opens with a standard click. The following JavaScript resolves this issue with data attributes and permits setting link targets for a single link and multiple specified links within a parent container for maximum flexibility.

JavaScript to Open Links in Specific Target Window using Data Attributes

Data Attribute Settings

  • data-open-link-parent: Defines the container for the links.
  • data-open-link-identifier: Identifies which links to target within the parent.
  • data-open-link-target: Sets the target for the link (_blank, _self, etc.), with _blank as the default.
  • data-open-link-items: Optionally specifies which specific items to affect, using index numbers.

Direct or Multiple Link Targeting

  • The script can be applied directly to a single link element without needing a parent.
  • If a parent is specified via data-open-link-parent, the script will work as before, targeting multiple links within that parent.
  • If no parent is specified, the script will directly target the single link element.

Single Link Example

<a href="http://example.com" data-open-link-identifier=".external-link" data-open-link-target="_blank">Link</a>

Multiple Links Example (with Parent)

<div class="parent-container" data-open-link-parent=".parent-container" data-open-link-identifier=".external-link" data-open-link-target="_blank">
  <a href="http://example1.com" class="external-link">Link 1</a>
  <a href="http://example2.com" class="external-link">Link 2</a>
</div>

How It Works

  • With Parent: If data-open-link-parent is specified, the script targets multiple links within that parent.
  • Without Parent: If data-open-link-parent is not specified, the script applies directly to the single element identified by the data-open-link-identifier.

This structure allows you to use the script on either a single link or a group of links within a parent element.

Summary of Link Target Options

_blank: New window/tab.

_self: Same frame/tab (default).

_parent: Parent frame (or same tab if not in a frame).

_top: Entire window, escaping frames.

framename: Named frame or a new window/tab if the frame does not exist.

This script solves the problem of Webflow Components not having Link Targets settings.

Currently, Webflow Components do not have link target settings, which poses issues when reusing them for different purposes, particularly within CMS-generated content like Blog Posts and News within a Collection List. This JavaScript code provides a solution to this link target limitation as depicted below: -

Webflow Component links currently don't have a link target setting

Using the attribute settings above, we can set all the specified component links in the Collection Items to open as '_blank' by applying the data attributes to the parent Collection List.

Example of link target settings on the Webflow Collection List to open all identified component links in a new Window _blank

If you want to mix and match link targets between _self, which is the default Webflow Component link value and a different target like _blank, you can set the data-open-link-items from the default 'all' to the corresponding number to the get, such as 1, 3, 4, 5 etc. So, for example, only links 1, 3, 4, 5 set in data-open-link-target will open as

Hopefully, you will find this script helpful. Your comments are welcome below.