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.


var myFrame = $('#source');
myFrame.load(function(){
      myFrame.contents().hasClass('.edit').css('border' , '#000 1px solid');
		
});

Use “find()” to get all of the elements with a certain class.

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

Just as an aside, I was playing round with this in Chrome and found it didn’t work locally.
Chrome gave me the error:

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?

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/security-in-depth-local-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/wiki/Part2#Local_network_/_remote_network_divide


$('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.

@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

<!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

<!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.

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