I want to (try to) open all links in a given element in a document.
I tried this code which failed:
const elWithLinks = document.querySelector("#mw-content");
const links = elWithLinks.querySelectorAll("a");
links.forEach( (el)=>{
el.open();
});
Uncaught TypeError: el.open is not a function
at :4:6
at NodeList.forEach ()
at :3:7
What may cause this problem?
It needs to be clicked so create a click event for them.
open() is a window object method.
Use:
window.open(el.href)
Or just:
open(el.href)
const elWithLinks = document.querySelector("#mw-content");
const links = elWithLinks.querySelectorAll("a");
links.forEach( (el)=>{
el.click();
});
Hello !
As you can read, I have changed open() to click() there.
I ran the code in both Chrome console and Edge console but the result was just my page being refreshed.
What are you trying to accomplish.
Clicking on an A element moves the window to the A elements referenced location and by default it refreshes the page.
Opening a link takes you to that link.
What href attributes do your <a> elements have?
Do your <a> elements have target="_blank" attributes so the hyperlinks open in new browser tabs or in new browser windows?
@dennisjn and @Archibald
I want to open all the links in the selected element â each link in a new tab.
Hence, if the element contains 10 a elements â 10 new tabs would be created.
The links donât have a target attribute.
The links are created by a CMS so I generally donât control their attributes (besides the href ).
To open in a new tab or new window you need target="_blank" attributes otherwise they will open in the same tab in quick succession. Even then you cannot control whether a browser will open in a new tab or in a new window. Anyway my Firefox, Chrome and Edge block all such popups from opening.
You could have the links open in iframes on the same web page.
I tried this code and I am having the same problem:
const elWithLinks = document.querySelector("#mw-content");
const links = elWithLinks.querySelectorAll("a");
links.forEach( (el)=>{
el.setAttribute('target', '_blank');
el.click();
});
Still, what happens is just one new tab which is actually a refreshment of the webpage in which the code was executed.
I have exactly that code working and opening two new web pages (after allowing popups).
Does your HTML have <a> elements within the mw_content element with href attributes for each <a> element linking to other web pages?
Indeed.
Here is such link HTML, for example:
<a href="/index.php/ENCODING" title="TITLE">TEXT</a>
Is that href attribute correct? Is index.php a file within a folder named âENCODINGâ? So should it not be href="/ENCODING/index.php" ?
I have uploaded a demonstration of the JavaScript working here:
http://flexi.epizy.com/links1.html
Thatâs on free webspace so you may get a security warning.
Hereâs the page source of the demonstration:
<!DOCTYPE html>
<html>
<head>
<title>Open Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="mw-content">
<p>MW content:</p>
<a href="http://bbc.co.uk/">BBC</a>
<a href="http://cnn.com/">CNN</a>
</div>
<script>
const elWithLinks = document.querySelector("#mw-content");
const links = elWithLinks.querySelectorAll("a");
links.forEach( (el)=>{
el.setAttribute('target', '_blank');
el.click();
});
</script>
</body>
</html>
href="/index.php/ENCODING" is indeed what appears to me (MediaWiki architecture).
Funny,
Itâs my bad,
My code actually worked but I didnât notice it due to two reasons:
I admit I donât know why the new tab is opened with my code.
Does it work if you use the full URL of the web page?
I misunderstood, the full URL of which webpage?
I should have made it clearer that I was suggesting you try using full URLs in the href attributes of the web pages that you wish to open in new tabs.
I wonder if you are seeing your web page refreshed, not the web page you want, because the relative URLs are incorrect.
Anyway, I wonder whether itâs worth continuing with this approach because of the impact of browser popup blockers.
<a href="/index.php/ALL_THE_REST" title="TITLE">TEXT</a>
Is the fullest link pattern I get from the MediaWiki content management system.
I donât know why the MediaWiki community chose to format links with /index.php/.
I wonder if you are seeing your web page refreshed, not the web page you want, because the relative URLs are incorrect.
I believe that I was wrong to use the term ârefreshedâ, nothing is really refreshed:
I just get a new tab with the same URL as of the previous tab (i.e. the one I ran the code at).
Anyway, I wonder whether itâs worth continuing with this approach because of the impact of browser popup blockers.
I too think that this strange behavior comes from popup blocker, because:
Why would a unconfigured pop up blocker cause a new tab with the same webpage of the previous one to be created this way?
I donât have a clue.
Itâs even stranger that this problem happened both in Chrome and Edge browsers.
I do not see any links with similar format here:
https://www.mediawiki.org/wiki/Help:Links
If you open one of those linked pages directly using your browser without using the JavaScript code, what URL do you see in your browserâs address bar? Surely that is more than just: /index.php/ENCODING.
So does the JavaScript open new tabs if you put full URLs such as:
https://example.com/index.php/ALL_THE_REST
in the href attrributes instead of a relative URLs such as:
/index.php/ALL_THE_REST
?
@Archibald I have deleted the post above yours.
I am sorry for the mistake in saying that I read full links in the DOM, I didnât.
I only read these in the link preview in the bottom-left part of the window and as the URL in web pages accessible from these links.
I donât know why MediaWiki doesnât have full links in the href.