Question

Let’s say I have multiple web pages, each containing an iframe and a link. Clicking the link opens the source of the iframe on the respective page in a new tab.

$('#win1_docViewerNewTab').click(function () {
    window.open($('#win1_docViewer').attr('src'), '_blank');
});

Furthermore, let’s say each of these web pages are in the same DOM (using, for example, jQuery tabs). Each link needs a unique ID, but they all use the same class. Same for the iframes.

My question: Is there a way to avoid repetition, and just have one javascript function on a master page that will cause the links on all three pages to open their respective iframes in new tabs?

Answer 1

Currently the anchors and the iframes have no relation (other than some wacky relation between their id names that cannot be relied upon).

You could use HTML5 data-* attributes to relate the anchor with the iframe:

<a class="anchor" id="win1_docViewerNewTab" data-iframeid="win1_docViewer" href="...">Click me</a>

and then in your master page:

$('.anchor').click(function () {
    window.open($('#' + $(this).data('iframeid')).attr('src'), '_blank');
    return false;
});