Open SuiteLinks in a new tab and Chrome

Open SuiteLinks in a new tab and Chrome header image

In a previous post I wrote about Open SuiteLinks in a new tab on a solution on how you can extend the SuiteLinks bar in SharePoint by adding some script to the MasterPage. In this script I used the DOMSubtreeModified event, and as it turned out this event is deprecated. Besides that it also seems to expect a slightly different implementation in Chrome. So since Office 365 states that it supports Chrome I figured that I should be looking to a replacement for the mutation events.

While looking into a replacement one of the things that you will see is suggested is the Mutation observer, something that looks really promising though the support is not available in all browsers. As you can see the implementation of the Mutation observer support is a bit scattered across all browsers, but most of the modern browsers will support it. For that reason I made an updated version of the script where we check if we can use the MutationObserver. If that is the case and we can use a MutationObserver object we will leverage that, if not we will do a fallback to the previous solution. That way we can still support all browsers and give the user an experience that is consistent over the different browsers

if(typeof MutationObserver != 'undefined') {
    var whatToObserve = {childList: true, subtree: true},
    mutationObserver = new MutationObserver(function(mutationRecords) {
      $.each(mutationRecords, function(index, mutationRecord) {
        if (mutationRecord.type === 'childList' && mutationRecord.addedNodes.length > 0) {
             var topLinks = $('ul#Suite_TopMenu li a');
            if(topLinks.length != 0) {
                $(topLinks).attr('target', '_blank');
            };
        }
      });
    });
    mutationObserver.observe(document.getElementById('suiteLinksBox'), whatToObserve);
}
else {
    var firstRun = true;
    $('div#suiteLinksBox').bind("DOMSubtreeModified",function(){
        if(firstRun){
            firstRun = false;
            var topLinks = $('ul#Suite_TopMenu li a');
            if(topLinks.length != 0) {
                $(topLinks).attr('target', '_blank');
            };
        }
    });
}

If you are working with the MutationObserver you can specify what you would want to observe, and fire actions for all those changes. While in our case we only want to catch new items added it can also be used to monitor deleted items, or to monitor property changes for that matter. Some insights on how you should implement it can be found on MSDN Mutation observers.

Loading comments…