Solved

Get URL from Iframe using Javascript

Posted on 2011-03-16
7
408 Views
Last Modified: 2012-05-11
Hi,

I'll wanting to find a div (with ID) on the page then look for the Iframe inside that div. Once the iframe is found, to get the URL (src attr) and write this to the next button on the the page.

I seem to be having issues finding the iframe itselfs, can anyone give me some help with this.
Thanks.

<html>
<div id="nodeWrapper">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 

<a href="iframeurl">Link </a>

</div>

<div id="nodeWrapper">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 

<a href="iframeurl">Link </a>

</div>

<div id="nodeWrapper">
<iframe title="YouTube video player" width="400" height="280" src="http://www.youtube.com/embed/cWSdOIqrgXw?rel=0" frameborder="0" allowfullscreen></iframe> 

<a href="iframeurl">Link </a>

</div>



</html>

Open in new window


 
<script type='text/javascript'> 
window.onload=init; 
function init()
{
 
  var o = document.getElementById("videoContent");
  var p = o.getElementsByTagName('iframe');
  if(p)
  {
    for( var i=0,limit=p.length; i < limit; ++i )
    {
      var URL;
      p[i].src = URL;
      //break;
      alert(URL);

      //split URL to get video ID
      //Add Video ID to next button with ID (button)
      // Do this for all 10 buttons on the page


    } 
  }
}
//--></script>

Open in new window

0
Comment
Question by:Envision11
  • 3
  • 3
7 Comments
 
LVL 16

Expert Comment

by:sjklein42
ID: 35153473
This will get you a little closer:

<script type='text/javascript'> 
window.onload=init; 
function init()
{
 
  var p = document.getElementsByTagName('iframe');
  if(p)
  {
    for( var i=0,limit=p.length; i < limit; ++i )
    {
      alert(p[i].src);


    } 
  }
}
//--></script>

Open in new window

0
 

Author Comment

by:Envision11
ID: 35154975
Thanks for the comment, but this will return all iframes on the page. The code above works, but I need to find an iframe within a div not all iframes.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 35156732
line 7 :  var p = o.getElementsByTagName('iframe')[0];
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 82

Expert Comment

by:leakim971
ID: 35156763
var URL = o.getElementsByTagName('iframe')[0].src;
0
 

Author Comment

by:Envision11
ID: 35158141
OK so I have changed the code to what has been suggested, this will only return the first iframe from the first div. How is it possible to find all the iframes with each div and return them to an array?

window.onload=init; 
function init()
{
  var o = document.getElementById("videoContent");
  for (var i = 0, limit = o.length; i < limit; ++i) {
    if (o) {
        var URL = o.getElementsByTagName('iframe')[0];
        alert(URL.src);

        //split URL to get video ID
        //Add Video ID to next button with ID (button)
        //Do this for all 10 buttons on the page
    }
  }
}

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 35159601
first use the << class >> attribute instead the << id >>
ID must be unique in a document.

<div class="nodeWrapper">

Open in new window




window.onload=init; 
function init()
{
  var o = document.getElementsByTagName("div");
  for (var i = 0, i<o.length; i++) {
    if (o.className == "nodeWrapper" ) {
        var URL = o.getElementsByTagName('iframe')[0];
        alert(URL.src);

        //split URL to get video ID
        //Add Video ID to next button with ID (button)
        //Do this for all 10 buttons on the page
    }
  }
}

Open in new window

0
 

Author Comment

by:Envision11
ID: 35159804
Ok so this is my working code, thanks for the help folks!

window.onload=init; 
function init()
{
  var o = document.getElementsByTagName("div");
  for (var i = 0; i<o.length; i++) {
    if (o[i].className == "videoContent" ) {
        var URL = o[i].getElementsByTagName('iframe')[0];
        alert(URL.src);
        
          
          
        //split URL to get video ID
        //Add Video ID to next button with ID (button)
        //Do this for all 10 buttons on the page
    }
  }
}

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now