{"id":322,"date":"2013-10-21T22:45:54","date_gmt":"2013-10-21T14:45:54","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=322"},"modified":"2018-09-04T13:10:54","modified_gmt":"2018-09-04T05:10:54","slug":"how-to-use-jquery-to-access-the-dom-structure-of-parent-html-webpage-from-within-the-child-html-window","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-use-jquery-to-access-the-dom-structure-of-parent-html-webpage-from-within-the-child-html-window\/","title":{"rendered":"How to use jQuery to access the DOM structure of parent HTML webpage from within the child HTML window"},"content":{"rendered":"

Sometimes, instead of showing a dialog box within a web page, it is more strategic to spawn a new HTML window as a dialog box to capture user input. This technique is especially useful when there are Java applets embedded in the web page, as Java applets tends to appear in front of every visual element on a HTML web page. There is no easy solution to place a visual element, for instance a HTML div, on top of Java applets.<\/p>\n

Spawning another web page in another window is straightforward, but how do I send data collected from a child HTML window back to the parent HTML webpage? With this question in mind, I set out to find an answer.<\/p>\n

A sample scenario<\/h2>\n

I will have a parent web page which contains a link for me to launch a child web page as a separate browser window. Within the child web page, I have a text field and a submit button for users to write messages back onto the parent web page.<\/p>\n

The parent web page<\/h2>\n

Once I had created the sample scenario, I proceeded with building the parent web page.<\/p>\n

With my HTML code reference<\/a> and JavaScript code reference<\/a>, I created the following HTML document:<\/p>\n

\r\n<html>\r\n<head>\r\n\t<title>How to use jQuery to access the DOM structure of parent HTML webpage from within the child HTML window<\/title>\r\n\t<script type="text\/javascript" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script>\r\n\t<script type="text\/javascript">\r\n\t\r\n\t\t$(document).ready(\r\n\t\t\tfunction () {\r\n\t\t\t\t$('#linkToSpawnChildWebPage').click(\r\n\t\t\t\t\t\r\n\t\t\t\t\tfunction (event) {\r\n\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\twindow.open('http:\/\/www.techcoil.com\/proof-of-concepts\/adding-html-components-to-parent-web-page-dynamically-with-jquery','_blank','height=600,width=1024, status=yes,toolbar=no,menubar=no,location=no'); \r\n\t\t\t\t\t}\r\n\t\t\t\t);\r\n\t\t\t}\r\n\t\t);\r\n\t\r\n\t<\/script>\r\n<\/head>\r\n<body>\r\n\t<a id="linkToSpawnChildWebPage" class="actionLink">Spawn child web page<\/a>\r\n\t\r\n\t<h3>Messages from child web page<\/h3>\r\n\t<div id="messagesArea">\r\n\t<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
At the head section of the parent web page, I reference a jQuery library hosted by Google. By doing so, I attach a jQuery object to the web page's window<\/code> object. In the JavaScript block that follows, I look for a HTML element with linkToSpawnChildWebPage<\/code> as its id and attach a callback function for jQuery to notify my codes when the HTML element is being clicked. When that happens, the function is given an event<\/code> object which I use for stopping linkToSpawnChildWebPage<\/code>'s default behaviour when it is being clicked on. <\/p>\n
After calling event.preventDefault<\/code>, I use the window<\/code> object of the parent web page to launch the child web page in a window of its own.<\/p>\n
In the body section of the parent web page, I show<\/p>\n