javascript - Can not access cross domain parent element inside my iframe

Question

Hi all.

Below is description of my que:

I have added bookmarklet feature to my site. For this, I have provided one link called "my bookmark" in my site.. So, I will drag that link to bookmark and it will be added to bookmark. So, from now, when I m visiting other site say "yahoo.com" .. and I like any content of that site so I can select that content and click on "my bookmark" from bookmark, it will open one page of my site as child element of "yahoo.com".

For that, I have added below code in javascript. where ifrme src is my site's url.

 var div = document.createElement("div");

  div.id = "instacalc_bookmarklet";

  var str = "";
  str += "<table id='instacalc_bookmarklet_table' valign='top' width='570' cellspacing='0' cellpadding='0'><tr><td width ='850' height='880'>";
  str += "<iframe frameborder='2' scrolling='yes' name='instacalc_bookmarklet_iframe' id='instacalc_bookmarklet_iframe' src='" + iframe_url + "' width='850px' height='875px' style='textalign:right; backgroundColor: white;'></iframe>";
  str += "</td><td id='closetd' onClick='toggleItem(\"instacalc_bookmarklet\");' style='background: #FFDDDD;' title='click to close window' valign='top' align='center' width='20px'>";
  str += "<a href='javascript:void(0);' style='width:100%; text-align: middle; color: #FF0000; font-family: Arial;'>x</a>";
  str += "</td></tr></table>";

  div.innerHTML = str;

  div.onkeypress = keyPressHandler;
  document.body.insertBefore(div, document.body.firstChild);

You can mark that here, I have added one table tag, and two td inside that.. One td to show my page in iframe and another td for "close" button.. which will close this opened windown from "yahoo.com".

Now, my question is.. I have button "close" in my site.. onclick of it... I want to close the window.. (the same action which 'close' button in above javascript does.. call "toggleItem" function)

But my problem is.. in my iframe I am not able to access the div element..

I have written like

<a href="#bookmarklet" onclick="closethis();">Close</a>


<script>

    function closethis()
    {

      id='instacalc_bookmarklet';
      var item = parent.document.getElementById(id);
      if(item){
     if ( item.style.display == "none"){
       item.style.display = "";
     }
     else{
       item.style.display = "none";
     } 
      }
    }


</script>

but onclick of that close link.. I get javascript error "permission denied to get property window.document" on line var item = parent.document.getElementById(id);

Any Ideas?

Thanks in Advance.

Answer 1

This is forbidden by javascript for security reason and you cannot change it. They are some ways to bypass the restriction :

• Use a callback function and load the data as JSONP. This may not suit your case.
• Create a form in the web page with an action aiming the foreight domain, submit it, get the response then delete the form.