SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2011
    Location
    Portland
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery find class in iframe and add border

    As the title states i need to find the html class name in an iframe. I'm using jquery to accomplish this.

    Code:
    var myFrame = $('#source');
    myFrame.load(function(){
          myFrame.contents().hasClass('.edit').css('border' , '#000 1px solid');
    		
    });
    coming soon sitejuju.com my new development portfolio

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Use "find()" to get all of the elements with a certain class.

    Code JavaScript:
    $('iframe').load(function() {
      $("iframe").contents().find(".edit").css('border' , '#000 1px solid');	
    });

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    Just as an aside, I was playing round with this in Chrome and found it didn't work locally.
    Chrome gave me the error:
    Code:
    Unsafe JavaScript attempt to access frame with URL file:///C:/Users/Pullo/Desktop/iframe.html from frame with URL file:///C:/Users/Pullo/Desktop/test.html. Domains, protocols and ports must match.
    Bizarre really, but I threw it up on a server and it worked as expected.

    Does anyone know why Chrome considers two files with the same protocol, host and port to be unsafe and if one can do anything about this?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,677
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Does anyone know why Chrome considers two files with the same protocol, host and port to be unsafe and if one can do anything about this?
    The reason for the local restriction is to help protect your computer from intrusion attempts.

    Some detailed information about this is at http://blog.chromium.org/2008/12/sec...web-pages.html
    Further details about Chrome's same-origin policy in relation to the local network is at http://code.google.com/p/browsersec/...network_divide
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2011
    Location
    Portland
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    $('iframe').load(function() {
      $("iframe").contents().find(".edit").css('border' , '#000 1px solid');	
    });
    The above code did not work. It doesnt seem to work in any browser.
    coming soon sitejuju.com my new development portfolio

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,858
    Mentioned
    206 Post(s)
    Tagged
    12 Thread(s)
    @Paul,
    Thanks for the links. Having read them Chrome's behaviour actually seems to be quite justified/sensible.

    @jgettner,
    The code does work. Maybe you have an old version of jQuery?

    Here is a stand-alone example which should do what you want.

    example.html
    HTML Code:
    <!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">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Iframe Example</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
      </head>
      
      <body>
        <iframe src="iframe.html"></iframe>
        <p><a href="#" id="trigger">Click me</a></p>
        
        <script>
          $("iframe").load(function() {
            $("#trigger").click(function() {
              $("iframe").contents().find(".edit").css('border' , '#000 1px solid');
            });
          });
        </script>
      </body>
    </html>
    iframe.html
    HTML Code:
    <!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">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>The iframe</title>
      </head>
      
      <body>
        <p class="edit">Hello!</p>  
      </body>
    </html>
    I tested this in the latest versions of Firefox, Chrome (remotely), IE, Safari and Opera.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Anytime you are dealing with iframes you have to work within a server environment with a proper domain as file:/// causes a lot of issues with cross domain validation since file:/// isn't a valid domain


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •