Using javascript to loop through links on page and set target attribute

Question

I have a document library in SharePoint 2010 and the library will hold different types of files: Word, Excel, PDF, HTML...

Most of the file types open in an application. Those that don't, like .htm newsletters, open in the same window. The Sharepoint document library links to the files, but does not allow the setting of the target property.

I'd like to set this programmatically onload.

I've taken a stab at writing the code:

for(var i = 0, l=document.links.length; i<l; i++) {
var id = document.links[i].href;
var idl = id.length;

if(idl >=7 ){

    var lastfour = id.substr(id.length - 4); 
    var lastfive = id.substr(id.length - 5); 

    if (lastfour == ".pdf"){
        //alert(document.links[i].href);
        document.links[i].setAttribute('target', '_blank');
        document.links[i].setAttribute('onfocus', 'return flase;');
    }


    if (lastfour == ".htm"){
        //alert(document.links[i].href);
        document.links[i].setAttribute('target', '_blank');
        document.links[i].setAttribute('onfocus', 'return false;');
    } 

    if (lastfive == ".html"){
        //alert(document.links[i].href);
        document.links[i].setAttribute('target', '_blank');
        document.links[i].setAttribute('onfocus', 'return false;');
    }  


}
}

This works because it causes the link to open in a new window, but also opens it in the main window. After further research, I found out that SharePoint does some wacky things with the links:

<a onfocus="OnLink(this)" href="/Diocesan/2017 Diocesan Special Collection Calendar.pdf" onmousedown="return VerifyHref(this,event,'0','PdfFile.OpenDocuments','')" onclick="return DispEx(this,event,'TRUE','FALSE','FALSE','','0','PdfFile.OpenDocuments','','','','1210','0','0','0x400001f07fbf1bff','','')">2017 Diocesan Special Collection Calendar</a>

I think my problem is due to the onfocus attribute being set or maybe the onclick. I'm not sure what is happening. Should I try setting onmousedown, onclick & onfocus = ""?

Try the following: https://stackoverflow.com/questions/103402/how-can-you-have-sharepoint-link-lists-default-to-opening-in-a-new-window — Jacques Marais, Jul 10 '17 at 20:39

Thriggle · Accepted Answer · 2017-07-11T14:38:06.940

The reason SharePoint opens it in the current window has to do with the OnClick event listener attached to the <a> elements. The DispEx() function that it invokes is used to detect whether the user has a corresponding application in which to open the file, causing it to open Office files in the correct Office application if possible (instead of downloading the file and prompting the user to save or open).

Conveniently, the OnClick event is attached in-line via the onclick attribute in the HTML, so you can circumvent this behavior by clobbering over the value in that attribute.

 var links = document.querySelectorAll("a");
 for(var i = 0, len = links.length; i < len; i++){
      links[i].target = "_blank";
      links[i].onclick = "return false";
 }

The downside is that SharePoint won't perform its fancy footwork to try to open the files in the correct applications anymore.

To account for this, if you know which types of files you want to open in a new window, you can perform an additional check before messing with the target and onclick attributes.

For example, let's say you know you want all .htm, .pdf, and .txt files to open in a new window, but you want to leave other file type behavior unchanged.

The following code checks to see if a file name contains one of the specified file types before changing the click behavior.

 var links = document.querySelectorAll("a");
 for(var i = 0, len = links.length; i < len; i++){
      var link = links[i].href;
      if(link.indexOf(".htm") & link.indexOf(".pdf") & link.indexOf(".txt") >= 0){
          links[i].target = "_blank";
          links[i].onclick = "return false";
      }
 }

The code could be improved by checking that the filenames end with the specified file extensions instead of containing them anywhere within their URLs.

 var links = document.querySelectorAll("a");
 for(var i = 0, len = links.length; i < len; i++){
      var link = links[i].href;
      if(endsWith(link,".htm") || endsWith(link,".pdf") || endsWith(link,".txt")){
          links[i].target = "_blank";
          links[i].onclick = "return false";
      }
 }
 function endsWith(text,target){
    return text.indexOf(target) == text.length - target.length;
 }

I added some alert commands to your last text block which I modified to load .htm & .html links in a new window. The alert commands never execute and the links load in the main window not a new one. Maybe there is something special I need to do to get the code to execute after the page finishes loading? — RCDAWebmaster, Jul 11 '17 at 14:19
Yes. Remove [Field='LinkFilename'] from the first line and it fires off as expected. You might want to edit your answer so that I can mark it as the answer. — RCDAWebmaster, Jul 11 '17 at 14:29
Sorry for the confusion! That was just an example CSS selector to grab the links from the Name field (assuming that field is exposed) of a list view web part, as opposed to grabbing all links on the page, but I can remove it and make it generic if you like. — Thriggle, Jul 11 '17 at 14:37
Thanks for the assistance. I ended up looping through all the links on the page and only monkeying with the .htm &.html files. This works fine as site pages are .aspx and as such not affected. Other files like PDFs & office documents open in an application. — RCDAWebmaster, Jul 12 '17 at 15:06

Using javascript to loop through links on page and set target attribute

1 Answers1