JQueryiframe頁面操作父頁面中的元素與方法(實例講解)
1)在iframe中查找父頁面元素的方法:
$('#id', window.parent.document)
2)在iframe中調(diào)用父頁面中定義的方法和變量:
parent.method
parent.value
3)實例
1.父頁面
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<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>
</head>
<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>
</html>
2.子頁面
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
//在iframe中查找父頁面元素
alert($('#default', window.parent.document).html());
//在iframe中調(diào)用父頁面中定義的方法
parent.getHelloWorld();
//在iframe中調(diào)用父頁面中定義的變量
alert(parent.hello);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="iframe">
IFrame.aspx
</div>
</form>
</body>
</html>
- jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
- js與jQuery 獲取父窗、子窗的iframe
- JQuery操作iframe父頁面與子頁面的元素與方法(實例講解)
- jquery 查找iframe父級頁面元素的實現(xiàn)代碼
- iframe里面的元素觸發(fā)父窗口元素事件的jquery代碼
- 使用jquery/js獲取iframe父子級、同級獲取元素的方法
- JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
- jQuery中彈出iframe內(nèi)嵌頁面元素到父頁面并全屏化的實例代碼
- jQuery實現(xiàn)iframe父窗體和子窗體的相互調(diào)用
- 利用JQuery操作iframe父頁面、子頁面的元素和方法匯總
相關(guān)文章
jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
jquery 實現(xiàn)全選,反選,全不選等功能,下面直接以例子進行說明,需要的朋友可以參考下2012-10-10基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)仿微博發(fā)布框字數(shù)提示的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07JQuyer $.post 與 $.ajax 訪問WCF ajax service 時的問題需要注意的地方
我注意到,當(dāng)在jquery中使用$.post()后,默認的contentType是application/x-www-form-urlencoded 形式進行了urlencoded - 當(dāng)我的asp.net MVC代碼需要的contentType=application/json2011-09-09EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實現(xiàn)
這篇文章主要介紹了EasyUI 數(shù)據(jù)表格datagrid列自適應(yīng)內(nèi)容寬度的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07JQuery實現(xiàn)列表中復(fù)選框全選反選功能封裝(推薦)
在做列表時經(jīng)常會遇到全選,反選進行批量處理問題。通過本文給大家介紹JQuery實現(xiàn)列表中復(fù)選框全選反選功能封裝,對jq復(fù)選框全選反選功能感興趣的朋友一起看看吧2016-11-11基于jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星
下文與大家分享下使用jquery實現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星,感興趣的朋友可以參考下哈,希望對你有所幫助2013-05-05