快捷導(dǎo)航

Jquery調(diào)用iframe父頁面中的元素及方法

更新時(shí)間：2016年08月23日 15:18:41 投稿：daisy

對(duì)于javascript操作iframe父級(jí)頁面元素的方法，大家應(yīng)該都非常清楚了，下面結(jié)合當(dāng)前非常流行的jquery分享一下如何使用jquery查找和操作iframe父級(jí)頁面元素的實(shí)現(xiàn)代碼。

一、在iframe中查找父頁面元素的方法：

$(‘#id', window.parent.document)

二、在iframe中調(diào)用父頁面中定義的方法和變量：

parent.method
parent.value

三、實(shí)例

父頁面：

<%@ 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>

子頁面

<%@ 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>

四、總結(jié)

Jquery調(diào)用iframe父頁面中的元素及方法到這就基本結(jié)束了，希望對(duì)大家的學(xué)習(xí)和工作能有所幫助。如果有疑問可以留言討論。

您可能感興趣的文章:

相關(guān)文章

js禁止瀏覽器頁面后退功能的實(shí)例(推薦)
下面小編就為大家?guī)硪黄猨s禁止瀏覽器頁面后退功能的實(shí)例(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁滑動(dòng)門菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁滑動(dòng)門菜單效果代碼,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)變換頁面tab樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
ES6 Promise基礎(chǔ)用法(resolve、reject、then、catch,a
Promise是JavaScript中處理異步操作的對(duì)象,它有三種狀態(tài)：Pending、Fulfilled、Rejected,使用new Promise創(chuàng)建Promise對(duì)象,通過resolve和reject改變狀態(tài),then和catch方法用于處理成功和失敗的結(jié)果,本文介紹ES6 Promise用法,感興趣的朋友一起看看吧
2024-09-09
layui 數(shù)據(jù)表格根據(jù)值(1=業(yè)務(wù),2=機(jī)構(gòu))顯示中文名稱示例
今天小編就為大家分享一篇layui 數(shù)據(jù)表格根據(jù)值(1=業(yè)務(wù),2=機(jī)構(gòu))顯示中文名稱示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
微信小程序template模板引入的問題小結(jié)
這篇文章主要介紹了微信小程序template模板引入的問題小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript過濾數(shù)組重復(fù)元素的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下
2017-05-05
JavaScript彈出對(duì)話框的三種方式
本文主要介紹了javascript中的三種彈出對(duì)話框，分別是alert()方法，confirm()方法，prompt()方法，對(duì)javascript彈出對(duì)話框相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
javascript實(shí)現(xiàn)的仿51job地址多項(xiàng)選擇方式效果
分享一個(gè)類似51job方式的地址選擇效果
2009-12-12
javascript 打印內(nèi)容方法小結(jié)
關(guān)于JS打印問題！網(wǎng)上收集+自己總結(jié) ，需要的朋友可以參考下。
2009-11-11
echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果(最新推薦)
這篇文章主要介紹了echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03