Jquery to Get Set Read Access IFrame Content TextBox Value Data using Asp.Net C# VB.Net

As you know that recent day’s smart developers doesn’t use IFRAME. But in our job always developers need to handle legacy systems. I found such type of legacy application. Now I am trying to modify the user requirement. To do that I need to read or access IFrame content as well as get or put some data from parent page to IFRAME. Since i did it that’s why I want to share with you how one can access read or even can get IFrame content controls like TextBox Text value as well as set the value from parent page to IFRAME TextBox controls using JQUERY.

Jquery to get set read access IFrame content TextBox Value Data CSHARP VB.Net

To do the Example Add the below ASPX page and name it IFRAME.aspx:
We will use this page as an Iframe content of our Default page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="IFRAME.aspx.cs" Inherits="IFRAME" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <form id="form1" runat="server">
    <asp:Label runat="server" ID="lblInfo">Iframe TextBox: </asp:Label>
    <asp:TextBox runat="server" ID="txtInfo"></asp:TextBox>

Now modify the Default Page to add IFrame like below:

        <iframe id="uploadIFrame" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="IFRAME.aspx"></iframe>    
        <asp:Button runat="server" ID="btnSet" Text="Hello Jquery Developers!!" />
        <asp:Button runat="server" ID="btnGet" Text="Click to read Iframe TextBox Data !!" />

Now add Jquery reference in Default Page like below:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Now Add the Jquery Script to Get or Read IFrame Contents:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=btnSet.ClientID %>').click(function () {
            var $currIFrame = $('#uploadIFrame');
            $currIFrame.contents().find("body #txtInfo").val($('#<%=btnSet.ClientID %>').val());
            return false;

    $(document).ready(function () {
        $('#<%=btnGet.ClientID %>').click(function () {
            var $currIFrame = $('#uploadIFrame');
            alert($currIFrame.contents().find("body #txtInfo").val());
            return false;


Hope now one can access IFRAME content as well as set the value from parent page to IFrame using JQUERY.

Code Explanation:
Here I have created an Object named currIFrame which holds the full IFrame reference. The contents() method is used to get full HTML code inside the IFRAME. The Find() method is used to find out the element. The rest of the code is self explanatory. Hope you can understand.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net
3 comments on “Jquery to Get Set Read Access IFrame Content TextBox Value Data using Asp.Net C# VB.Net
  1. Gaurav says:

    Nice! Thanks for this. Can we do this over two domains? How do I set/read value of textbox of another url webpage either by iFrame or anything else. (change value of textbox at xyz.com/textbox.html from pqr.com/changeby.html)

Leave a Reply

Your email address will not be published. Required fields are marked *