Script to open html links in new tabs

dntel · #1 07-28-2010, 05:13 AM

Hiya,

I'm trying to scope this out as a small project for myself. I have to send out a lot of email campaign whilst checking all the HTML links. So i'm thinking of writing something in JavaScript where I can paste the raw HTML code into a text box and run a function that will look for all <a href="Site">'s and open the links in new tabs in a window.

Can someone maybe give me an insight if thats feasible, seems simple enough in my head

I'm just thining, for each <a href> open link in new tab.

Thanks!

JeroenHoekstra · #2 07-28-2010, 06:03 AM

Code:

a = document.getElementsByTagName("a"); // returns an array with all the link elements

for(i = 0; i < a.length; i ++)
{
    window.open(a[i].href); // Opens window with a[i] URL
}

Haven't tested it, but I guess this should work. The problem is that the exact thing you wish (opening the link in a new tab) is not possible in Javascript. I searched the web a little and what I found confirmed this.

tirna · #3 07-28-2010, 06:22 AM

Quote:

Originally Posted by JeroenHoekstra

Code:

a = document.getElementsByTagName("a"); // returns an array with all the link elements
 
for(i = 0; i < a.length; i ++)
{
    window.open(a[i].href); // Opens window with a[i] URL
}

I thought of doing something similar until I read the "fine print" in the OP's post.

The html with the links will be in a text box (or textarea I assume), but either way the links will be in a text string and not the DOM, so you can't use the DOM methods to get the links.

The only way I can think of atm is that you will probably have to build a parsing function to parse the string containing the html and look for the href's. Once you find the href's, check if their value is a web url and not say a link to javascript. If they are a web url, open the href in a new window.

JeroenHoekstra · #4 07-28-2010, 10:29 AM

Maybe you could use a hidden div element. The approach would be:

- parsing the value of the text box to the div using the innerHTML function.
- get all the <a> elements from the div.
- open all the URL's in different windows.

insert this into the head section:

Code:

<script type="text/javascript">
	<!--
	function open_links()
	{
		document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;	
		a = document.getElementById("htmlDiv").getElementsByTagName("a");
				
		for(i=0; i < a.length; i++)
		{
			window.open(a[i].href);
		}
			}
	-->
</script>

insert this into the body:

Code:

<div>
	<textarea id="htmlArea"></textarea>
	<button onclick="open_links();">open links</button>
</div>
<div id="htmlDiv" style="display: none;"></div>

The codes have been tested and worked.

dntel · #5 07-30-2010, 03:30 PM

Thanks mate, that actually works perfectly, just what I was looking for. Just one thing:

Is there a way I can make the script do a document.write and write each <a href> then <br> so they all get listed below my text area. Basically like a report?

I tried this:

Code:

function open_links()
	{
		document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;	
		a = document.getElementById("htmlDiv").getElementsByTagName("a");
				
		for(i=0; i < a.length; i++)
		{
			window.open(a[i].href);
			var divReport = document.getElementById("report");
			report.innerHTML = (a[i].href);
			
		}
			}

But that Just basically writes it on a new page, I want to try and place it underneath the text area in say red?

Thanks a lot for all your help btw

Liam

dntel · #6 07-30-2010, 05:20 PM

Sorry to keep posting, just I'm working away at it now trying make stuff work and I'm getting closer. I basically have what I want with this:

Code:

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <script type="text/javascript">
	<!--
	function open_links()
	{
		document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;	
		a = document.getElementById("htmlDiv").getElementsByTagName("a");
				
		for(i=0; i < a.length; i++)
		
			{

			var item = (a[i].href);
			window.open(a[i].href);
			var divReport = document.getElementById("report");
			report.innerHTML = (a[i].href);
			document.write('<div style="font-family:Lucida Console; background:black; color:#FFFFFF; font-size:12px">' + item + '</div>');
			document.write("<br\/>");
			
			
			}
	}
	-->
</script>
 </HEAD>

 <BODY>
  
<div>
	<textarea id="htmlArea" cols=50 rows=20></textarea>
	<button onclick="open_links();">open links</button>

	<div id="report"></div>

	
</div>
<div id="htmlDiv" style="display: none;"></div>

 </BODY>
</HTML>

This works like so: paste the raw html in, opens all links in new tab, the on a new page it writes the URL then <br />'s and lists the next and so on for e.g.

www.google.com
www.google.com

But I don't want it on a new page, I want it to display below my text area on my main page

preferably numbered like:

1. Link
2. Link

With a total at the bottom, I will keep trying, but if you have any ideas

#

Liam

JeroenHoekstra · #7 07-30-2010, 08:29 PM

Hello there. I don't know how far you came trying to figure out the way to get your code to work but I guess this is what you wanted to get:

Insert this into the body

Code:

<div>
	<textarea id="htmlArea" cols=50 rows=20></textarea>
	<button onclick="open_links();">open links</button>

	<ol id="report" style="display: none;">
		<li></li>
	</ol>
	
	<p id="reportNumber"></p>
	
	<div id="htmlDiv" style="display: none;"></div>
</div>

Insert this into the header:

Code:

<script type="text/javascript">
	<!--
	function open_links()
	{
		document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;	
		a = document.getElementById("htmlDiv").getElementsByTagName("a");
						
		for(i=0; i < a.length; i++)
		{	
			window.open(a[i].href)//the ( and ) characters signify that window.open is a function;
				
			if(i == 0)
			{
				document.getElementById("report").innerHTML = "<li><a href=\"" + a[i].href + "\" />" + a[i].href + "</a></li>";
				document.getElementById("report").style.display = "block";
			}
			else
			{
				document.getElementById("report").innerHTML += "<li><a href=\"" + a[i].href + "\" />" + a[i].href + "</a></li>";
			}
		}
				
		document.getElementById("reportNumber").innerHTML = "Total: " + i;
	}
	-->
</script>

Quote:

But that Just basically writes it on a new page

That's because you used the document.write function. if i'm not mistaken it kind of clears you page and rewrites it with whatever it is you put between the ( and ) characters. Not a 100% certain though. At least this new code should end you problem. If there's anything else, don't hesitate to post.

dntel · #8 08-02-2010, 08:26 AM

Hey Again!

I've got this functioning the way I want now, I think theres only one thing I needed to ask you:

The loop goes through and takes all the <a hrefs> but what does it do when it hits a <a href=""><a/> is there a way to append the if statement so that it reads if <a href> = null then "Warning: Link missing" ?

I just thought of this as we had this problem the other day where we missed a link that was empty and therefore a client wasnt too happy

Thanks for all your help on this btw, first time using javascript, I understand programming logic as I use other languages

Liam

JeroenHoekstra · #9 08-02-2010, 12:44 PM

I'm currently working on it but am facing a serious problem here. I can't get it to check <a href=""></a> but it can check <a></a>, in which case it now returns a warning. One bug has been removed however. I tested it using a <a> tag without the href attribute and the function stopped when it reached the empty link. Now it proceeds opening the other links and returns the warning for <a> tags without an href attribute. When you enter a link such as <a href="">something</a> it opens the same page your on in a different window. I dont know if this is the desired effect, but I'm afraid I can't make it any better (lack of knowledge I guess).

One possible solution could be using css3's :not pseudo selector and change the background of the links with no or empty href attribute. In that case one could check the style of the <a> element with Javascript. The problem with this is that this would only be supported by modern browsers and that's not a good way of solving the issue.

For now the only solution i can offer is this:

head

Code:

<script type="text/javascript">
	<!--
	function open_links()
	{
		document.getElementById("htmlDiv").innerHTML = document.getElementById("htmlArea").value;
		document.getElementById("htmlDiv").style.display = "none";
		a = document.getElementById("htmlDiv").getElementsByTagName("a");
		
		for(i=0; i < a.length; i++)
		{	
			if(a[i].href != "" && (a[i].href != "#" || "javascript: void(0)" || "javascript: void(0);"))
			{
				window.open(a[i].href)//the ( and ) characters signify that window.open is a function;
			}
			else if(a[i].href == "")
			{
				id = document.getElementById("linkWarning");
				id.style.display = "block";
				if (id.innerHTML != "") 
				{
					id.innerHTML += ", " + (i + 1);
				}
				else 
				{
					id.innerHTML = '<span style="color: red">WARNING missing href attribute for link number(s):</span><br />' + (i + 1);
				}
			}
				
			if(i == 0)
			{
				document.getElementById("report").innerHTML = "<li><a href=\"" + a[i].href + "\" />" + a[i].href + "</a></li>";
				document.getElementById("report").style.display = "block";
			}
			else
			{
				document.getElementById("report").innerHTML += "<li><a href=\"" + a[i].href + "\" />" + a[i].href + "</a></li>";
			}
		}
				
		document.getElementById("reportNumber").innerHTML = "Total: " + i;
	}
	-->
</script>

body

Code:

<div>
	<textarea id="htmlArea" cols=50 rows=20></textarea>
	<button onclick="open_links();">open links</button>

	<ol id="report" style="display: none;">
		<li></li>
	</ol>
	
	<p id="reportNumber"></p>
	
	<div id="htmlDiv" style="display: none;">test</div>
	<div id="linkWarning" style="display: none;"></div>
</div>

Take into account that not only an empty href or missing href will pose a problem, href attributes with a #, javascript: void(0);, etc. will also result in an error. This has only partially been resolved, because when the href attribute is filled with a function it won't work anymore. Hope your happy with the script as is.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)