how to get the URL of a link in a page?

how to get current src of an iframe?

What I want to do is add a special background color for a link in my page if the link's URL is the same as the src in the iframe.

That is, when you click the link, it targets the iframe (changing its src of course). I want the link's background color to change. I also want it to change back when I click the next link targeting the iframe.

I'm thinking that I will need javascript to do this. I'm a noob though, so I'm not sure how to assess the link's URL so that I can test it against the iFrame's source and change the link's background with an "if" statement.

I guess I can use an onClick event to change the background color (and revert the background colors of all the adjacent links) without reading the iframe src at all, but is that the most elegant way? (There are about 10 links in all!..)

Here's some code that I've written just to see if I can somehow read the url in the link using javascript, but it just won't work for me.

<script type="text/javascript"> 
var myLink = document.getElementById("myLink");
var myURL = myLink.URL; 
alert(myURL);
</script>

The alert just doesn't pop up.

Any help appreciated. Thank you.

how to get the URL of a link in a page?

how to get current src of an iframe?

What I want to do is add a special background color for a link in my page if the link's URL is the same as the src in the iframe.

That is, when you click the link, it targets the iframe (changing its src of course). I want the link's background color to change. I also want it to change back when I click the next link targeting the iframe.

I'm thinking that I will need javascript to do this. I'm a noob though, so I'm not sure how to assess the link's URL so that I can test it against the iFrame's source and change the link's background with an "if" statement.

I guess I can use an onClick event to change the background color (and revert the background colors of all the adjacent links) without reading the iframe src at all, but is that the most elegant way? (There are about 10 links in all!..)

Here's some code that I've written just to see if I can somehow read the url in the link using javascript, but it just won't work for me.

<script type="text/javascript"> 
var myLink = document.getElementById("myLink");
var myURL = myLink.URL; 
alert(myURL);
</script>

The alert just doesn't pop up.

Any help appreciated. Thank you.

• javascript
• url
• iframe

• 1 You might have made a simple mistake: the attribute that specifies the URL is called "href", not "URL". – Sam Commented Mar 12, 2014 at 21:06
• Did you try var urlOfMyPage = document.url; – Vikram Commented Mar 12, 2014 at 21:15

5 Answers 5

Use this:

var myLink = document.getElementById("myLink");
var myURL = myLink.href; 
alert(myURL);

HREF instead of URL.

First, you need debug it correctly. Alert() should always works no matter you got the url or not, So use chrome, try your code, and right click-> inspection element -> Console, see if there is any error message? also you can set break point to track your code, hope this helps!

To get the src of the iframe

<iframe id="myIframe" src="http://www.example."></iframe>

var iframe = document.getElementById('myIframe');
var iframeSrc = iframe.src;

To get attributs of "myLink" element :

var myLink = document.getElementById("myLink");
// for href attribut
var AttributValue = myLink.getAttribute("href");
alert(AttributValue);

// for class attribut
var AttributValue = myLink.getAttribute("class");

....

The way I would do it:

Give all of the links a class, as follows:

HTML

...
<a href="XYZ" onclick="javascript:void(0)" class="navLink">Link A</a>
...

Then have your initializing function 'initLinks()' loop through these links and set their 'onclick' event handler to your function that handles the clicks ('onClickLink()').
That function will reset the background color of the previously active link and set the new links bg color. Also, it stores the current links as next executions previous active link. Also (most important), it sets the iframe src.
'this' means the element that triggered the function, so the corresponding '' link.

JAVASCRIPT

window.onload = initLinks; // let initLinks() be executed when page has loaded

var prevActiveLink; // previously active link

function initLinks(){ // does all the startup work for the links

var allLinks = document.getElementsByClassName('navLink'); // get all links (that have your classname)
for (var i=0, i<allLinks.length, i++){ // loop through them
allLinks[i].onclick = onClickLink; // set their onclick event to your function
}
prevActiveLink = allLinks[0]; // Set the first link to the previously active link (so that onClickLink() doesn't throw 'undefined' error at first execution)
allLinks[0].onclick(); // Select the first link at start
}

function onClickLink(){
document.getElementById('myIframe').src = this.href; // Set iframe src

prevActiveLink.backgroundColor = "white"; // set previously active link's background-color back to white
this.backgroundColor = "red"; // set new active link's background-color to your color

prevActiveLink = this; // set current active link to next executions previous active link
}