Home > Developer > Web Develop
JQuery iframe page manipulate elements and methods in the parent page (example explained)
1) method to find the parent page element in the IFRAME:
$ (' #id ', window.parent.document)
2) Call the methods and variables defined in the parent page in the IFRAME:
Parent.method
Parent.value
3) Example
1. Parent page
Copy the code code as follows:
<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Iframedemo._default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script language= "javascript" type= "Text/javascript" src= "Jquery-1.5.1.min.js" ></script>
<script language= "javascript" type= "Text/javascript" >
var hello = ' Hello ';
function Gethelloworld () {
Alert (' Hello World ');
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<div id= "Default" style= "width:200px; height:400px; Float:left; " >default.aspx</div>
<iframe id= "Iframeid" src= "iframe.aspx" style= "width:400px; height:400px; Float:left; " ></iframe>
</div>
</form>
</body>
2. Sub-page
Copy the code code as follows:
<%@ page language= "C #" autoeventwireup= "true" codebehind= "IFrame.aspx.cs" inherits= "Iframedemo.iframe"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script language= "javascript" type= "Text/javascript" src= "Jquery-1.5.1.min.js" ></script>
<script language= "javascript" type= "Text/javascript" >
$ (function () {
Find the parent page element in the IFRAME
Alert ($ (' #default ', window.parent.document). html ());
Calling methods defined in the parent page in the IFRAME
Parent.gethelloworld ();
Calling variables defined in the parent page in the IFRAME
alert (Parent.hello);
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "iframe" >
Iframe.aspx
</div>
</form>
</body>
JQuery iframe page manipulate elements and methods in the parent page (example explained)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
