Jquery - Adding a function to element within Iframe?

Question

I tried a lot of ways but non of them worked. For example that one works:

         $('#iframeid').ready( 
      function()
      {
  alert('Hello');
  }
 );

but following doesn't (alerts hello but do not focus.)

     $('a:link').click(
     function()
     {
        alert('Hello'); 
        var iframeRef = document.getElementById("iframeid");
        $(iframeRef).focus();
 $(iframeRef).contents().find("#smthing").focus(); 
     });

Help me work it out please.

Answer 1

What you are trying to do is access another document. Most (if not all) browsers block this, as it is a security problem. Having scripts load and read the contents of other sites is... well... evil.

Answer 2

For security purposes you cannot access other domains in iframes with Javascript. There may even be issues with iframes from the same domain in some browsers.

If possible, I would avoid the use of iframes wherever possible. If you have the HTML content, you can add it inline with a div with overflow:auto to achieve the same effect.

As a side note, why do you use document.getElementById("iframeid")? You must know that you can do $('#iframeid') in jQuery, since you do that on the next line.

Answer 3

The Same origin policy restricts access another domain loaded into an iframes properties from javascript.