Menu
I have a site that builds the pages dynamically. It's a SharePoint site. The site contains a lot of document libraries. The libraries contain word, excel and PDF documents. When a user clicks on a document, the document opens in the client application for office documents only. PDFs simply open in the same window. when people close the window containing the document, they close the site. I'm trying to use javascript to onload add target="_blank" to the PDF links.
So far I have:
window.onload = function(){
l=document.links.length;
for(i = 0; i<l; i++) {
n = document.links[i].href.indexOf(".pdf");
if (n > 0){
document.links[i].setAttribute('target', '_blank');
}
}
}
This code sort of works as some of the pdf links load in a new window as expected, some load in the parent window and some links load in both a new window and the parent. How do I tell the browser not to load in the parent window and only in the new window?
This is what I want to achieve:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<a href="a.pdf">a.pdf</a><br /><br />
<a href="b.html">b.html</a><br /><br />
<a href="c.pdf">c.pdf</a><br /><br />
<script>
window.onload = function(){
l=document.links.length;
for(i = 0; i<l; i++) {
n = document.links[i].href.indexOf(".pdf");
if (n > 0){
document.links[i].setAttribute('target', '_blank');
}
}
}
</script>
</body>
</html>
The problem I'm running into is that sharepoint document libraries are modifying the link behavior such that the javascript does not make then open in a new window. Below is an example of a link from a document library:
<a onfocus="OnLink(this)" href="https://rcd.sharepoint.com/HR/HR%20Policy%20Manual.pdf" onmousedown="return VerifyHref(this,event,'0','','')" onclick="return DispEx(this,event,'TRUE','FALSE','FALSE','','0','','','','','331','0','0','0x7fffffffffffffff','','')">HR Policy Manual</a>
765
If you don't have access to all elements for ahead with capturing all clicks on the page. Use addEventListener with enabled capturing for handling event. Test whether it's anchor tag and proceed to new page by own with code below:
document.addEventListener("click", function(e){
if (e.target.localName == 'a') {
var url = e.target.getAttribute('href');
e.stopPropagation();
// You can place extra checks here.
var tab = window.open(url, '_blank');
tab.focus();
}
}, true)
Here is what I would do, I think I would collect the anchors and loop over them to check if the hrefs ends with .pdf and then add a function on all the .pdf links
Don't check for pdf files with .indexOf('.pdf'). Your check should fail If there's a filename called somedummyfile.pdf.something.png (which is a .png image) or any other formatted file.
Note that, new window might be blocked at user's end if they are using add-blockers.
Here is the Snippet:
function modifyLinks() {
let links = document.getElementsByTagName('a');
let properties = 'height=' + window.innerHeight + ',width=' + window.innerWidth + ',' + 'scrollbars=yes,status=yes';
for (i = 0; i < links.length; i++) {
if (links[i].href.endsWith('.pdf')) {
// links[i].setAttribute('target', '_blank'); // if you want to open them in new tab;
console.log(links[i].href);
links[i].addEventListener('click', function(e) {
e.preventDefault();
window.open(this.href, '_blank', properties);
})
}
}
}
window.addEventListener('load', modifyLinks);<a href="somefile_1.pdf">File 1</a>
<a href="somefile_2.pdf">File 2</a>
<a href="somefile_3.pdf">File 3</a>
<a href="test.html">HTML Link</a>
<a href="some_file.ai">Some Other file</a>
answered Oct 12 '22 23:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With