Binding to an id in a frame that's showing a third-part website

a) I have an html page that looks like this:

<html>
<head>
<title>Page Title</title>
</head>

<script type="text/javascript">
  document.write('<FRAMESET cols="*, 300" border="0">');
  document.write('<FRAME src="http://www.my-website.com" id="inner" name="inner" />');
  document.write('<FRAME src="http://www.third-party-website" id="chatframe" name="chatframe" />');
  document.write('<NOFRAMES><P>You must have a frames compatible browser to use Activa Live Chat</P></NOFRAMES>');
  document.write('</FRAMESET>');
</script>

</html>

where the my-website.com frame is my website that I have full access to and where third-party-website.com is a website that I have no access to (it's a chat software).

b) Normally the chat would open in a popup, but we've done this so that it opens in a frame on the right side of the page.

c) The chat frame has a "close" link, which ends the chat session. It has a div around it:

<div class="close" id="close-chat">

d) What I'd like to additionally happen when the "close" link is clicked is for the chat frame to close, i.e. redirect back to "my-website.com."

I've tried using jQuery .bind() to add a click function to the #close div with no success.

Thanks for the help to anyone who is interested!

Solution

You didn't provide any of your jQuery, but you mention a #close div. Your div is #close-chat or .close, not #close.

Without more code, I can't tell you if this is the real issue.

If the div you are trying to access is on another domain, this will not work as it breaks cross-browser scripting security.