iframe与父页面、子页面的交互

最新推荐文章于 2025-04-20 18:42:10 发布

lihefei_coder

最新推荐文章于 2025-04-20 18:42:10 发布

阅读量1.4w

点赞数 2

分类专栏： JavaScript iframe 文章标签： javascript iframe 父页面子页面交互

本文链接：https://blog.csdn.net/lihefei_coder/article/details/78635558

版权

JavaScript 同时被 2 个专栏收录

37 篇文章

订阅专栏

iframe

3 篇文章

订阅专栏

本文介绍父页面与子页面之间的交互方法，包括如何通过原生JS和jQuery获取窗口、文档及调用对方的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父页面与子页面交互

父页面获取子页面的window对象：

//原生JS获取方式：
var frameWin = document.getElementById("ifr").contentWindow;
或
var frameWin = document.getElementsByTagName('iframe')[0].contentWindow;
或
var frameWin = document.frames[frameName];

//jQuery获取方式：
var frameWin = $('#ifr')[0].contentWindow;

父页面获取子页面的document、body对象：

//原生JS获取方式：
var frameWin = document.getElementById("ifr").contentWindow;
var frameDoc = frameWin.document;
var frameBody = frameDoc.body;

//jQuery获取方式：
var frameWin = $('#ifr')[0].contentWindow;
var $frameDoc = $(frameWin.document);
var $frameBody = $frameDoc.find('body');

父页面调用子页面的方法：

//原生JS调用方式：
var frameWin = document.getElementById("ifr").contentWindow;
frameWin.method();  //method为子页面的方法

//jQuery调用方式：
var frameWin = $('#ifr')[0].contentWindow;
frameWin.method();  //method为子页面的方法

子页面与父页面交互

子页面获取父页面的window对象：

var parentWin = window.parent;

子页面获取父页面的document、body对象：

//原生JS获取方式：
var parentWin = window.parent;
var parentDoc = parentWin.document;
var parentBody = parentWin.body;

//jQuery获取方式：
var parentWin = window.parent;
var $parentDoc = $(parentWin.document);
var $parentBody = $parentDoc.find('body');

子页面调用父页面的方法：

var parentWin = window.parent;
parentWin.method();  //method为父页面的方法