pulling code from an iframe

[turpentyne]

I tried to rework a short script to pull info from an iframe instead of the basic page it's sitting on, and I got confused. It's not working. Here's what I've got:

<script type="text/javascript" language="JavaScript">
    function find_div_class() {
       var divCollection = document.getElementById('iframeId');

       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

       for (var i=0; i<divCollection.length; i++) {
            if(innerDoc[i].getAttribute("class") == "list-journal-entry-wrapper") {
                findMeText = divCollection[i].innerHTML;
                alert(findMeText);

      } 
        }
    }
    </script>
    
    Press the button to find the divs with class "iframeId".<br />
    <input type="button" onfocus="this.blur()" 
    value="iframeId" onclick="javascript:find_div_class();return false;""/>

I tried another way too, but still nothing:

<script type="text/javascript" language="JavaScript">
    function find_div_class() {
       var divCollection = document.getElementById('iframeId');

       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

var info = document.getElementById("list-journal-entry-wrapper");

                alert(list-journal-entry-wrapper);

      } 
        }
    }
    </script>

[Old Pedant]

??? Your second way seems to have the idea, but you never define the variable iframe. And then you use document.getElementById( ) and that will try to get stuff from the main window, *not* the iframe!

Plus you have one { but then 3 } ... never work! { and } must be matched up. Same as ( and ), [ and ].

I *think* all you need is this:

<script type="text/javascript" language="JavaScript">
function find_div_class() {
       var [COLOR="Red"]iframe[/COLOR] = document.getElementById('iframeId');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var info = [COLOR="Red"]innerDoc[/COLOR].getElementById("list-journal-entry-wrapper");

       alert([COLOR="Red"]info[/COLOR]); // or maybe [COLOR="Red"]info.innerHTML[/COLOR] ??

} 
</script>

[turpentyne]

Cool! That did the trick.. Now, instead of "alert", I have to figure out how to search the pulled code block for the first instance of <span class="full-image-float-left ssNonEditable"> and pull the Image link that's within that span.

The snippet of html it would be going to, should be something generally like this:

<span class="full-image-float-left ssNonEditable"><span><img src="/storage/images/testentry1.jpg?__SQUARESPACE_CACHEVERSION=1314309812229" alt="" /></span></span>


I've gotten to this point, but how do I get only the first instance of my span class?

<script type="text/javascript" language="JavaScript">
function find_div_class() {
       var iframe = document.getElementById('IFrame2');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var info = innerDoc.getElementById("contentWrapper");
       var drilldown = info.innerDoc.getElementByClass("full-image-float-left ssNonEditable");

       alert(drilldown);

} 
</script>
    
    Press the button to find the div.<br />
    <input type="button" onfocus="this.blur()" 
    value="findMeText" onclick="javascript:find_div_class();return false;""/>

Any thoughts on that? I'm gonna look for solutions and try and wrap my head around how to do this, but maybe someone can save me a smidgeon of time?

[Old Pedant]

If you aren't doing this in MSIE 8 or below, it's trivial.

<script type="text/javascript" language="JavaScript">
function find_div_class() {
       var iframe = document.getElementById('iframeId');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var info = innerDoc.getElementById("list-journal-entry-wrapper");

       // get FIRST span with specific class name:
       var span = info.getElementsByClassName("full-image-float-left")[0];
       // get FIRST image inside that span:
       var image = span.getElementsByTagName("img")[0];
       // and then the image link:
       var theURL = image.src;
} 
</script>

If you need it to work in MSIE, it's not hard. Just have to avoid getElementsByClassName.

[Old Pedant]

If it's not clear, getElementsByClassName and getElementsByTagName always return a *collection* of objects (even if the collection only has one element), so you use [ 0 ] to get the first element of the collection.

[Old Pedant]

Oh, what the heck...version for old MSIE:

<script type="text/javascript" language="JavaScript">
function find_div_class() {
       var iframe = document.getElementById('iframeId');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var info = innerDoc.getElementById("list-journal-entry-wrapper");

       var theURL = null;  // assume not found

       var spans = info.getElementsByTagName("span");
       for ( var s = 0; s < spans.length; ++s )
       {
           // have to search through spans for the class name:
           var span = spans[s];
           if ( span.className.indexOf("full-image-float-left") >= 0 )
           {
               // we found the right one
               // get FIRST image inside that span:
               var image = span.getElementsByTagName("img")[0];
               // and then the image link:
               theURL = image.src;
           }
        }
        if ( theURL == null ) alert("I can't find the darned thing!");
} 
</script>

[Old Pedant]

Finally, that <span> you showed has two class names. If you really need to be sure you have only a <span> with *both* class names, then use the MSIE version and check for both:

           var span = spans[s];
           if ( span.className.indexOf("full-image-float-left") >= 0 
               && span.className.indexOf("ssNonEditable") >= 0 )
           {
               ...

There's a way to do this with the non-MSIE version, but w.t.h. This should work.

[turpentyne]

Sorry for the delay! Weekend fun interrupted my work.

I think I'm overlooking something. This script doesn't seem to be doing anything in Firefox, and in IE it gives an "error on page" notice at the bottom. I'm not getting the null alert, "I can't find the darned thing!".

Here's the script:

<script type="text/javascript" language="JavaScript">
function find_div_class() {
       var iframe = document.getElementById('IFrameID');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var info = innerDoc.getElementById("list-journal-entry-wrapper");

       var theURL = null;  // assume not found

       var spans = info.getElementsByTagName("span");
       for ( var s = 0; s < spans.length; ++s )
       {
           // have to search through spans for the class name:
           var span = spans[s];
           if ( span.className.indexOf("full-image-float-left") >= 0 
               && span.className.indexOf("ssNonEditable") >= 0 )
           {
               // we found the right one
               // get FIRST image inside that span:
               var image = span.getElementsByTagName("img")[0];
               // and then the image link:
               theURL = image.src;
           }
        }
         if {( theURL == null ) alert("I can't find the darned thing!");}
         else {alert(theURL);}
}

</script>
    
    Press the button to find the div.<br />
    <input type="button" onfocus="this.blur()" 
    value="theURL" onclick="javascript:find_div_class();return false;""/>

And, inside the iframe, here's the source of what I'm searching:

<div class="list-journal-entry-wrapper">

          


<div class="journal-entry-wrapper post-text authored-by-frontdoorsnews ">
<div id="item12614316" class="journal-entry">

  <div class="journal-entry-float-day"><span class="name">Wednesday</span></div><div class="journal-entry-float-date"><span class="month">Aug</span><span class="date">24</span><span class="year">2011</span></div>

  
  
  
  <div class="journal-entry-text">
  
      
      <h2 class="title">
    
        
    
        <a class="journal-entry-navigation-current" href="/cover_stories/2011/8/24/test-entry-4.html">test entry&nbsp;4</a>  
     
         
    
      </h2>
      
       <div class="journal-entry-tag journal-entry-tag-post-title"><span class="posted-on">   <img title="Date" alt="Date" class="inline-icon date-icon" src="/universal/images/transparent.png" />Wednesday, August 24, 2011</span> |  <span class="print-item"><a href="/cover_stories/2011/8/24/test-entry-4.html?printerFriendly=true"> <img title="Print Article" alt="Print Article" class="inline-icon print-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp; Print </a></span> |  <span class="share-item"><a href="javascript:noop();" onclick="Squarespace.Interaction.shareLink(this,'%2Fcover_stories%2F2011%2F8%2F24%2Ftest-entry-4.html','test%20entry%204');"> <img title="Share Article" alt="Share Article" class="inline-icon share-icon" src="/universal/images/transparent.png" />    Share </a></span> |  <span class="email-item"><a href="/cover_stories/recommend/12614316"> <img title="Email Article" alt="Email Article" class="inline-icon email-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp;  Email </a></span> </div> 

    
  
     

      <div class="body">

  
        
  
         
  
        <p><p><span class="full-image-float-left ssNonEditable"><span><img src="/storage/images/testentry1.jpg?__SQUARESPACE_CACHEVERSION=1314309812229" alt="" /></span></span>test entry 1 text test entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 text</p></p>
  
        <p class="journal-read-more-tag"><a href="/cover_stories/2011/8/24/test-entry-4.html">Click to read more ...</a></p>
  
      </div>
  
    

  </div>

      <div class="journal-entry-tag journal-entry-tag-post-body">
      <div class="journal-entry-tag-post-body-line1"><span class="posted-by">  <a href="/cover_stories/author/frontdoorsnews"> <img title="Author" alt="Author" class="inline-icon user-registered-icon" src="/universal/images/transparent.png" />Frontdoors News Network</a></span> </div>

      <div class="journal-entry-tag-post-body-line2"></div>
      <div class="journal-entry-tag-post-body-line3"></div>
    </div>
  
  
  <div class="clearer"></div>

</div>
</div>






<div class="journal-entry-wrapper post-text authored-by-frontdoorsnews ">
<div id="item12614313" class="journal-entry">

  <div class="journal-entry-float-day"><span class="name">Wednesday</span></div><div class="journal-entry-float-date"><span class="month">Aug</span><span class="date">24</span><span class="year">2011</span></div>
  
  
  
  <div class="journal-entry-text">
  
      
      <h2 class="title">
    
        
    
        <a class="journal-entry-navigation-current" href="/cover_stories/2011/8/24/test-entry-3.html">test entry&nbsp;3</a>  
     
         
    
      </h2>

      
       <div class="journal-entry-tag journal-entry-tag-post-title"><span class="posted-on">   <img title="Date" alt="Date" class="inline-icon date-icon" src="/universal/images/transparent.png" />Wednesday, August 24, 2011</span> |  <span class="print-item"><a href="/cover_stories/2011/8/24/test-entry-3.html?printerFriendly=true"> <img title="Print Article" alt="Print Article" class="inline-icon print-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp; Print </a></span> |  <span class="share-item"><a href="javascript:noop();" onclick="Squarespace.Interaction.shareLink(this,'%2Fcover_stories%2F2011%2F8%2F24%2Ftest-entry-3.html','test%20entry%203');"> <img title="Share Article" alt="Share Article" class="inline-icon share-icon" src="/universal/images/transparent.png" />    Share </a></span> |  <span class="email-item"><a href="/cover_stories/recommend/12614313"> <img title="Email Article" alt="Email Article" class="inline-icon email-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp;  Email </a></span> </div> 

    
  
     

      <div class="body">

  
        
  
         
  
        <p><p><span class="full-image-float-left ssNonEditable"><span><img src="/storage/images/testentry2.jpg?__SQUARESPACE_CACHEVERSION=1314309878916" alt="" /></span></span>test entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 texttest entry 1 text</p></p>
  
        <p class="journal-read-more-tag"><a href="/cover_stories/2011/8/24/test-entry-3.html">Click to read more ...</a></p>
  
      </div>
  
    

  </div>

      <div class="journal-entry-tag journal-entry-tag-post-body">
      <div class="journal-entry-tag-post-body-line1"><span class="posted-by">  <a href="/cover_stories/author/frontdoorsnews"> <img title="Author" alt="Author" class="inline-icon user-registered-icon" src="/universal/images/transparent.png" />Frontdoors News Network</a></span> </div>

      <div class="journal-entry-tag-post-body-line2"></div>
      <div class="journal-entry-tag-post-body-line3"></div>
    </div>
  
  
  <div class="clearer"></div>

</div>
</div>






<div class="journal-entry-wrapper post-text authored-by-frontdoorsnews ">
<div id="item12614307" class="journal-entry">

  <div class="journal-entry-float-day"><span class="name">Wednesday</span></div><div class="journal-entry-float-date"><span class="month">Aug</span><span class="date">24</span><span class="year">2011</span></div>
  
  
  
  <div class="journal-entry-text">
  
      
      <h2 class="title">
    
        
    
        <a class="journal-entry-navigation-current" href="/cover_stories/2011/8/24/test-entry-2.html">test entry&nbsp;2</a>  
     
         
    
      </h2>

      
       <div class="journal-entry-tag journal-entry-tag-post-title"><span class="posted-on">   <img title="Date" alt="Date" class="inline-icon date-icon" src="/universal/images/transparent.png" />Wednesday, August 24, 2011</span> |  <span class="print-item"><a href="/cover_stories/2011/8/24/test-entry-2.html?printerFriendly=true"> <img title="Print Article" alt="Print Article" class="inline-icon print-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp; Print </a></span> |  <span class="share-item"><a href="javascript:noop();" onclick="Squarespace.Interaction.shareLink(this,'%2Fcover_stories%2F2011%2F8%2F24%2Ftest-entry-2.html','test%20entry%202');"> <img title="Share Article" alt="Share Article" class="inline-icon share-icon" src="/universal/images/transparent.png" />    Share </a></span> |  <span class="email-item"><a href="/cover_stories/recommend/12614307"> <img title="Email Article" alt="Email Article" class="inline-icon email-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp;  Email </a></span> </div> 

    
  
     

      <div class="body">

  
        
  
         
  
        <p>test entry 1 summary</p>
  
        <p class="journal-read-more-tag"><a href="/cover_stories/2011/8/24/test-entry-2.html">Click to read more ...</a></p>
  
      </div>
  
    

  </div>

      <div class="journal-entry-tag journal-entry-tag-post-body">
      <div class="journal-entry-tag-post-body-line1"><span class="posted-by">  <a href="/cover_stories/author/frontdoorsnews"> <img title="Author" alt="Author" class="inline-icon user-registered-icon" src="/universal/images/transparent.png" />Frontdoors News Network</a></span> </div>

      <div class="journal-entry-tag-post-body-line2"></div>
      <div class="journal-entry-tag-post-body-line3"></div>
    </div>
  
  
  <div class="clearer"></div>

</div>
</div>






<div class="journal-entry-wrapper post-text authored-by-frontdoorsnews ">
<div id="item12614306" class="journal-entry">

  <div class="journal-entry-float-day"><span class="name">Wednesday</span></div><div class="journal-entry-float-date"><span class="month">Aug</span><span class="date">24</span><span class="year">2011</span></div>
  
  
  
  <div class="journal-entry-text">
  
      
      <h2 class="title">
    
        
    
        <a class="journal-entry-navigation-current" href="/cover_stories/2011/8/24/test-entry-1.html">test entry&nbsp;1</a>  
     
         
    
      </h2>

      
       <div class="journal-entry-tag journal-entry-tag-post-title"><span class="posted-on">   <img title="Date" alt="Date" class="inline-icon date-icon" src="/universal/images/transparent.png" />Wednesday, August 24, 2011</span> |  <span class="print-item"><a href="/cover_stories/2011/8/24/test-entry-1.html?printerFriendly=true"> <img title="Print Article" alt="Print Article" class="inline-icon print-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp; Print </a></span> |  <span class="share-item"><a href="javascript:noop();" onclick="Squarespace.Interaction.shareLink(this,'%2Fcover_stories%2F2011%2F8%2F24%2Ftest-entry-1.html','test%20entry%201');"> <img title="Share Article" alt="Share Article" class="inline-icon share-icon" src="/universal/images/transparent.png" />    Share </a></span> |  <span class="email-item"><a href="/cover_stories/recommend/12614306"> <img title="Email Article" alt="Email Article" class="inline-icon email-icon" src="/universal/images/transparent.png" />&nbsp; &nbsp;  Email </a></span> </div> 

    
  
     

      <div class="body">

  
        
  
         
  
        <p>test entry 1 summary</p>
  
        <p class="journal-read-more-tag"><a href="/cover_stories/2011/8/24/test-entry-1.html">Click to read more ...</a></p>
  
      </div>
  
    

  </div>

      <div class="journal-entry-tag journal-entry-tag-post-body">
      <div class="journal-entry-tag-post-body-line1"><span class="posted-by">  <a href="/cover_stories/author/frontdoorsnews"> <img title="Author" alt="Author" class="inline-icon user-registered-icon" src="/universal/images/transparent.png" />Frontdoors News Network</a></span> </div>

      <div class="journal-entry-tag-post-body-line2"></div>
      <div class="journal-entry-tag-post-body-line3"></div>
    </div>
  
  
  <div class="clearer"></div>

</div>
</div>





    
    
  </div>

  

  


</div></div>

[Old Pedant]

Well, for starters, it helps to write *LEGAL* JavaScript.

Does this really look legal to you:

 if {( theURL == null ) alert("I can't find the darned thing!");}
         else {alert(theURL);}

????

It should be

        if ( theURL == null ) 
        {
            alert("I can't find the darned thing!");
        } else {
            alert(theURL);
        }

You don't put the braces *OUTSIDE* the word "if".

But then the other problems are:
(1) You don't read your own code carefully.
In the <iframe> code you have

<div [B][COLOR="Red"]class=[/COLOR][/B]"list-journal-entry-wrapper">

But then the JS code reads

       var info = innerDoc.getElement[B][COLOR="Red"]ById[/COLOR][/B]("list-journal-entry-wrapper");

A class name is *NOT* an ID!!!

I fixed it by changing that line to

       var info = innerDoc.getElementsByClassName("list-journal-entry-wrapper")[0];

but that won't work in MSIE versions below 9.

(2) You are looking for a span with a class name of "full-image-float-left".
But there are *TWO* such spans in your iframe code!!!

WHICH ONE should you find????

The code, as written, will always find the *last* one, however many there are.

If you want to always find the first one, just add one line to the code:

           if ( span.className.indexOf("full-image-float-left") >= 0 
               && span.className.indexOf("ssNonEditable") >= 0 )
           {
               // we found the right one
               // get FIRST image inside that span:
               var image = span.getElementsByTagName("img")[0];
               // and then the image link:
               theURL = image.src;
[B][COLOR="Red"]               break; // quit when we find first one
[/COLOR][/B]           }

It took all of about 90 seconds of debugging using FireBug in Firefox browser to find all this. *PLEASE* learn to use FireBug!

[turpentyne]

I appologize for frustrating you. I am a beginner. Javascript coding is not my main focus... and thank you for suggesting firebug. I have never heard of it. That is why I did not use it.

[Old Pedant]

Not frustrating! That was an easy one to fix. Frustrating is when there are 187 different things that have to be fixed to make the code work. <grin/>

And apologies if I hadn't mentioned FireBug before. Trust me, the hour or two you will spend learning to use it will save you ten to fifty times that much in the long run!

Regarding that code not working in MSIE: If the contents of the <iframe> are really what you showed, meaning that the bulk of the iframe contents are contained in that

<div class="list-journal-entry-wrapper">
    ...
</div>

then you would just get rid of one line of code and make it work in all browsers:

<script type="text/javascript">
function find_div_class() {
       var iframe = document.getElementById('IFrameID');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
[COLOR="Red"]       // remove the line where you get "info" value
[/COLOR]
       var theURL = null;  // assume not found

[COLOR="Red"]       // then search entire document:
[/COLOR]       var spans = [COLOR="Red"]innerDoc[/COLOR].getElementsByTagName("span");
       for ( var s = 0; s < spans.length; ++s )
       {
           // have to search through spans for the class name:
           var span = spans[s];
           if ( span.className.indexOf("full-image-float-left") >= 0 
               && span.className.indexOf("ssNonEditable") >= 0 )
           {
               // we found the right one
               // get FIRST image inside that span:
               var image = span.getElementsByTagName("img")[0];
               // and then the image link:
               theURL = image.src;
               break;
           }
        }
        if ( theURL == null ) 
        {
            alert("I can't find the darned thing!");
        } else {
            alert(theURL);
        }
}
</script>

That should be more than adequate.

[turpentyne]

Thanks again for the help..

unfortunately, a follow-up question about alternative methods.

Everything worked fine until I pulled it into the full coding of Squarespace's system. Then it not only bogged down in speed, but it didn't really work within their system... and my window kept locking up. Works fine as it's own page, though.

Is there a different way that I could get this info? I'm limited in that I can't use any server-side code on their servers. I read something about converting html to xml, but I'm not sure if that was rss feeds or something else.

Any thoughts?

(added after post: Wait! Maybe this is another 'duh' moment. I could go straight to the xml file with essentially the same code, It has the same span with two names, but i don't need to find the div it's in. I'm going to experiment with this, unless you think that wouldn't work... here's a bit of the feed, just to show the part I'm looking to get..almost exactly the same snippet I'm getting.

<?xml version="1.0" encoding="UTF-8"?>
<!--Generated by Squarespace Site Server v5.11.5 (http://www.squarespace.com/) on Tue, 30 Aug 2011 17:15:52 GMT-->
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" version="2.0"><channel><title>Cover stories</title>

<link>http://www.link.com</link><description></description><generator>Squarespace Site Server v5.11.5 (http://www.squarespace.com/)</generator><item><title>test entry 4</title>
<dc:creator>Frontdoors News Network</dc:creator><pubDate>Wed, 24 Aug 2011 19:55:36 +0000</pubDate><link>http://www.frontdoorsnews.com/cover_stories/2011/8/24/test-entry-4.html</link><guid isPermaLink="false">822467:11693620:12614316</guid>

<description>

[B]<![CDATA[<span class="full-image-float-left ssNonEditable"><span><img src="http://www.frontdoorsnews.com/storage/images/cover2011jan.jpg?__SQUARESPACE_CACHEVERSION=1314647067762" alt="" /></span></span>[/B]test entry 1 text test entry 1 t 1 text]]>

</description>

...the rest of the rss feed code. </item></channel></rss>

[Old Pedant]

If the XML feed is from the same domain, sure, read it instead. Almost surely more efficient.

But caution: The CDATA there will be just ordinary text to the XML parser.

So you might have to parse it as a string, not using DOM or XML methods.