[SOLVED] Extracting element inside an iframe using jquery

Extracting element inside an iframe using jquery

I am trying to extract the video link inside an iframe using jquery. I kept getting an empty result.

Here is my code:

    <html>
        <head></head>
        <body>
             <iframe id="video" src="//content.jwplatform.com/players/Jd4BqNM0-xkVaWyDw.html" width="500" height="500" frameborder="0" scrolling="auto" allowfullscreen style="position:absolute;"></iframe>

            <script type="text/javascript" src="js/jQuery.js"></script>
             <script>   
alert($('#video').contents().find("meta[property='og:video']").attr('content'));
             </script>


        </body>
     </html>

Solution

Try like this: https://jsfiddle.net/NwrtE/62/

$(document).ready(function () {

$.ajax({
      type: 'GET', 
        url: $("iframe#video").attr("src"),
      dataType: 'html',
      success: function(data) {

        //cross platform xml object creation from w3schools
        try //Internet Explorer
          {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async="false";
          xmlDoc.loadXML(data);
          }
        catch(e)
          {
          try // Firefox, Mozilla, Opera, etc.
            {
            parser=new DOMParser();
            xmlDoc=parser.parseFromString(data,"text/xml");
            }
          catch(e)
            {
            alert(e.message);
            return;
            }
          }

        var metas = xmlDoc.getElementsByTagName("meta");
        for (var i = 0; i < metas.length; i++) {   
          if (metas[i].getAttribute("property") == 'og:video') {
            alert(metas[i].getAttribute("content"));
          }
        }
        //adjust above line appropriately
      }
  });


  });