Closing Colorbox from iframe - calling parent doesn't work

Closing Colorbox from iframe - calling parent doesn't work

I have a very simple colorbox call -

main page

  1. <html>
  2.     <head>
  3.        <link rel="stylesheet" href="colorbox.css" />
  4.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  5.         <script src="../jquery.colorbox.js"></script>
  6.         <script>
  7.             $(document).ready(function(){
  8.                 $("#click").colorbox({width:"60%",
  9.                             height:"60%",
  10.                             iframe:true
  11.                 }); });
  12.         </script>
  13.     </head>
  14.     <body>
  15.         <p></p>
  16.         <p></p>
  17.         <a href="login.html" id="click">Click Me!</a>
  18.     </body>
  19. </html>


Login.html


  1.      <html>
  2.           <head>
  3.           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  4.          <script src="../jquery.colorbox.js"></script>
  5.     <script>
  6.        
  7.     </script>
  8.     </head>
  9.    
  10.     <body>
  11.         <a href='#' onclick='parent.$.colorbox.close(); return false;'>close this iframe</a>
  12.    
  13.     </body>
  14. </html>

Whenever I click on the hyperlink, I get these two errors...

  1. Unsafe JavaScript attempt to access frame with URL file:///C:/test/colorbox-master/example1/index.html from frame with URL file:///C:/test/colorbox-master/example1/login.html. Domains, protocols and ports must match.
Uncaught TypeError: Cannot read property 'colorbox' of undefined

I understand the unsafe operation error but the second one is puzzling. This example is from jack Moore's site itself so it must be working for many people. Can someone point to me what mistake I'm making here. Thanks!