URL of link from IFrame Javascript

Question

This question may seen before. But in my scenario I didn't get the success. I have local HTML file loading in Iframe with sample external Link.

        <a href="http://www.boutell.com/">sample.com</a>

Code:

    <iframe id="iframe_Id" src="sample.html" 
style="background-color:white; height:100%; width:100%;" onload="Load()"; ></iframe>

    function Load() {
alert("loaded");
    var linkchange = document.getElementById("iframe_Id").contentWindow.location;
alert(linkchange);
}

While click on the external link I need the url value of particular anchor tag.

Edit: I know because of security policy we can't get URL when it is different domain. But I need the value from my local HTML page(the Link URL What I Clicked ). I didn't tried in this case

Any help is needed regarding this.

Smeegs · Accepted Answer · 2013-11-07 12:50:09Z

2

You can call a function in the parent window when you click on a link in the frame.

In the parent html you need to add a function to handle the call. Something like

function iframeLinkClicked(url) {
     //do stuff
}

Then in the child window add a function to handle the click event of a hyperlink.

function linkClicked(hyperLink) {
    parent.iframeLinkClicked(hyperLink.href);
}

You need to add this to all hyperlinks

<a href="http://www.google.com" onclick="linkClicked(this);">google</a>

Now, when you click on a link, it will alert the parent window.

Edit: alternative to adding "onclick" to every hyperlink.

You can add the event to the frame elements when the frame is loaded, if the frame html is in the same domain.

This is the complete script in the parent page.

<script type="text/javascript">

    function iframeLinkClicked(url) {
        alert(url);
    }
    function Load(iframe) {
        iframe.onload = null;
        try {
            var a = document.frames['iframe_Id'].document.getElementsByTagName('a');
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    parent.iframeLinkClicked(this.href);
                    return false;
                };
            }
        } catch (e) {

        }

    }
</script>

This will replace your current Load() function. So the iframe still needs to have the load property set.

There is nothing to add to the child pages anymore. It's all done here.

<iframe id="iframe_Id" src="sample.html" 
style="background-color:white; height:100%; width:100%;" onload="Load(this);" ></iframe>

edited Nov 7, 2013 at 12:50

answered Nov 5, 2013 at 13:29

Smeegs

9,2346 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kumar Over a year ago

Works good, But I struck in middle. Bcz I will load many HTML files into IFrame one by one I have to add onclick to every anchor tag while loading into HTML page to IFrame & as well as function in the head tag. It looks heavy in my case. Can you suggest me any other suggestion if possible. Thanks

Smeegs Over a year ago

I updated my answer so you don't have to make any changes to the child pages. Just add the script to the parent page and it will set all the events there.

Kumar Over a year ago

It works.. Now I know the href value. One last question is I dont want to load that external link in my Iframe. I want to disable the onLoad event when click on link.

Smeegs Over a year ago

You set set onload to null in the load function so that it only calls Load() once. You have to pass the iframe into the function by passing this as a parameter. I updated my answer to show both the iframe markup and the updated function. If this answer helped you, please mark it as the answer so others can find it. Thank you.

Kumar Over a year ago

yes.. Surely, I learned something; But still It didn't get my requirement.With out using onload the link URL is opening in IFrame. Here I know one thing If you set attribute target as blank it will open in new window.

|

aksu · Accepted Answer · 2013-11-06 18:02:55Z

1

have a look at this:

var a = document.frames['iframe_Id'].document.getElementsByTagName('a');

for(i=0; i<a.length; i++) { 
  a[i].onclick = function() { 
    document.getElementById("iframe_Id").src = this.href;
    // and so on whatever you want to do
  }
}

edited Nov 6, 2013 at 18:02

answered Nov 5, 2013 at 13:29

aksu

5,2365 gold badges26 silver badges39 bronze badges

1 Comment

Kumar Over a year ago

var a =document.frames['iframe_Id'].document.getElementsByTagName('a'); This one works...

Collectives™ on Stack Overflow

URL of link from IFrame Javascript

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related