My question pertains to a bookmarklet feature I have added to my site. To utilize this feature, I have included a link titled "my bookmark" on my site. By dragging this link to my bookmarks, it can be easily accessed. When I visit another site, such as "yahoo.com," and come across content I like, I can select that content and click on "my bookmark" in my bookmarks. Doing so will open a page from my site as a child element of "yahoo.com."
To achieve this functionality, I have incorporated the following JavaScript code:
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);
In this code snippet, there is a table tag with two td elements - one for displaying the page in an iframe and the other for the "close" button which closes the opened window within "yahoo.com."
Now, my dilemma lies in attempting to close the window by clicking a "close" button on my site. I want this action to mimic what the "close" button in the above JavaScript does, calling the "toggleItem" function.
However, I am facing the issue of being unable to access the div element within my iframe. My attempted solution looks like this:
<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>
Upon clicking the close link, I encounter a JavaScript error stating "permission denied to get property window.document" when trying to retrieve the element by ID. Any ideas or suggestions would be greatly appreciated!
Thank you in advance.