如何从对话框窗口访问javascript中的父元素？

Question

I have a scenario where I have two JSPs. One of the JSPs is called 'parent.jsp' and the other is called 'dialog.jsp'. On parent.jsp, I have a table with an image on each row. The image is displayed in a div. On clicking the div a dialog pops up (dialog.jsp). On dialog.jsp, we have a button called 'Hide'. I want to hide the clicked image on parent.jsp as soon as the button 'Hide' on dialog.jsp is clicked but I cannot access the image div on parent.jsp in the onclick function of button 'Hide' on dialog.jsp. Here's my code:

parent.jsp

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<c:forEach items="${listOfElements}" var="element">

    <div id="myImage" style="background: url('images/myImage.png');" onclick="showDialog()"></div>

</c:forEach>
</table>

dialog.jsp

<input name="hideButton" type="button" onclick="hideImage();" value="Hide" />
<script type="text/javascript">
    function hideImage() {
        document.getElementById('myImage').hide();
    }
</script>

I get a null value at ' document.getElementById('myImage') '.I have used ' window.parent.document.getElementById('myImage').hide() ' too but the null value is still there. Note that I use Ext.Window to create the dialog.

Answer 1

inside showDialog(), I think you are using window.open(). window.open will give return newly opened window object. So that you can access newly opened window from parent. In the same way window.opener will give reference to parent window inside popup window.

Below links will help you

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

https://developer.mozilla.org/en-US/docs/Web/API/Window/opener