Get the element of the parent window from the iframe in jQuery

The following code snippets will show that how you can access an element of the parent window from the iframe document. The first html document has a input text type control, one button type input control and iframe element. We need to assign value of input text control in the span which are in iframe document using jQuery.

The following is the parent html document.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
    $("#btnSubmit").click(function(){
      $('#iframWelcome').attr('src', 'welcome.html');
    });
});
</script>
</head>
<body>
<form>
 Enter the name: 
 <input type="text" id="txtName" >
<input type="button" id="btnSubmit" value="Submit" />
<iframe id="iframWelcome">
</iframe>
</form>
</body>
</html>

Below is the other document that will be the document of the parent’s iframe.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#spanName').html(window.parent.$('#txtName').text());
});
</script>
</head>
<body>
<form id="Form1" method="post" runat="server">
Welcome <span id="spanName" ></span> 
</form>
</body>
</html>

See the JavaScript code block: window.parent.$(‘#txtName’) is the input text of the parent document.