Subscribe
Please visit my new Web Site https://coderstechzone.com
As you know that this days 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 thats why i want to share with you how one can access/read/get IFrame content controls like TextBox value as well as set the value from parent page to IFRAME using JQUERY.
Here is a simple output screenshot of my example:
To complete this example first create the below asp.net aspx page. Which we used within the IFRAME:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Iframe_Page_Content.aspx.cs" Inherits="Iframe_Page_Content" %>
<!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">
<title>Child page placed into the IFrame</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label runat="server" ID="lblInfo">Iframe TextBox: </asp:Label>
<asp:TextBox runat="server" ID="txtInfo"></asp:TextBox>
</div>
</form>
</body>
</html>
Now create the below asp.net master page:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="IFRame_Jquery.aspx.cs" Inherits="IFRame_Jquery" %>
<!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">
<title>How to Get Set Iframe Content Like TextBox Control Value Text Data</title>
<script src="Script/jquery.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="uploadIFrame" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="Iframe_Page_Content.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 !!" />
</div>
</form>
</body>
</html>
Now use the below JQUERY to get set value:<script language="javascript">
$(document).ready(function() {
$("#btnSet").click(function() {
var $currIFrame = $('#uploadIFrame');
$currIFrame.contents().find("body #txtInfo").val($('#btnSet').val());
return false;
});
});
$(document).ready(function() {
$("#btnGet").click(function() {
var $currIFrame = $('#uploadIFrame');
alert($currIFrame.contents().find("body #txtInfo").val());
return false;
});
});
</script>
Hope 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
