Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to get iframe contents inside a jquery selector

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.30k
    Comment on it

    This has been noticed that many times we try to locate an element and we do not get the element. The syntax of jquery selector is also correct but it is unable to find the element. In that case first take a look on entire HTML of the page and there might be a possibility that the element you are trying to locate is inside an iframe. In iframe we cannot locate the element directly. Let’s suppose, we have following HTML:

    <div id="main">
    
    <iframe id="mainiframe" name="mainiframe" src="/users/showDetails" style="height: 8076px;">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <body id="offshoreindialive">
    
    <div class="imgloader imgOverlay"></div>
    
    <div id="pagewrapper">
    
    <a class="heading" itemprop="creator" target="mainiframe" href="/profile/publicprofile/kanishka.kaushik/140">@kanishka.kaushik </a>

    In the above HTML, we have to find out the text of class "heading". We will use the following jquery to find the desired text:

     

    "$('.heading').text()"

     

    But this will not return the text of class "heading" because the entire content is inside an iframe. So the jquery selector will be:

     

    $("#mainiframe").contents().find('.heading').text()

     

    ".content()" method will give all the children of each element in the set of matched elements. This also includes all the text and commented nodes. So, now when we get all the contents of the iframe then we can easily find any element and retrieve its text.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: