$ in IFrame

Prototype $ method works well on parent page. However, if it has an IFrame, what happend to $ method, let s check it.

I have tested the same in a different way here

 Demonstration

 Code I used here

        <script type="text/javascript">
            Event.observe(window, 'load', function() {
                $('cmdHide').observe('click', function() {
                    //hide element in Iframe
                    try {
                        getEleInIFrame('para').hide();
                    }
                    catch (error) {
                        $$(".notice")[0].update(error).show();
                    }
                });

                $('cmdHide2').observe('click', function() {
                    //hide element in Iframe
                    try {
                        Element.hide(getEleInIFrame('para'));
                        $$(".notice")[0].update("congratulations!!!").show();
                    }
                    catch (error) {
                        $$(".notice")[0].update(error).show();
                    }
                });
            });
            //Get the element in Iframe
            function getEleInIFrame(tgtID) {
                var theFrame = $('ifr');
                var theDoc = theFrame.contentWindow.document;
                var theEle = theDoc.getElementById(tgtID);
                return theEle;
            }

</script>
        

 Finally what I understand

$(element).hide() does not work in my case. But Element.hide(element) works perfectly. What I have understood that the element in Iframe is not extended to use $(element).hide() method. if you are interested to know more, you can visit Element.extend