CODEWITHSUNDEEP
javascripthtml
deri sumargo
deri sumargo

Reputation: 11

How to pass data from a new window to the parent window

I want to pass data from a child window to the parent window.

Issue is that the child window opens but the value entered by the user does not pass to the parent window

parent.html

<form action="" method="post" name="f1">
    <table border="0" cellpadding="0" cellspacing="0" width="550">
        <tr>
            <td>
                <font face="Verdana" size="2">
                    Your Name
                </font>
                <input name="p_name" size="8" type="text">
                    <a href="javascript:void(0);" name="My Window Name" onclick='window.open("child.html","Ratting", "width=550,height=170,left=150,top=200,toolbar=1,status=1,");' title=" My title here ">
                        Click here to open the child window
                    </a>
                </input>
            </td>
        </tr>
    </table>
</form>

child.html

<html>
    <head>
        <script langauge="javascript">
            function post_value() { 
                opener.document.f1.p_name.value = document.frm.c_name.value;
                self.close();
            }
        </script>
        <title>
            (Type a title for your page here)
        </title>
    </head>
    <body>
        <form action="" method="post" name="frm">
            <table border="0" cellpadding="0" cellspacing="0" width="250">
                <tr>
                    <td align="center">
                        Your name
                        <input name="c_name" size="12" type="text" value="test">
                            <input onclick="post_value();" type="button" value="Submit">
                            </input>
                        </input>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

How can I pass data from my child window to the parent window?

Upvotes: 1

Views: 275

Answers (1)

nkshio
nkshio

Reputation: 1080

You can open a new window that acts as a dialog, and passes information back to the main window. However, this is restricted by same-origin policy, so you need to ensure both the files are served from the same origin.

Refer this SO answer for a detailed explanation on same-origin policy

Problem

When running on local machine (from your file system), browser gives the Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame error in the console because it is not able to confirm the origin.

Resolution

Serve both of these files from one web-server

Want to debug locally?

You can use a simple python server to run a web server in any directory. Steps below:

  1. Navigate to the directory: cd /path/to/directory
  2. Start python web-server: python -m SimpleHTTPServer
  3. Browse to localhost:8000

Hope it helps!

Upvotes: 1

Related Questions