H5_0040:iframe 父子页面方法调用

父页面与子页面交互
父页面获取子页面的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;
1
2
8
9
父页面获取子页面的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');
1
2
3
9
父页面调用子页面的方法:

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

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

6
7
子页面与父页面交互
子页面获取父页面的window对象:

var parentWin = window.parent;
1
子页面获取父页面的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');
1
2
3

8
9
子页面调用父页面的方法:

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

 

posted @ 2020-04-16 15:11  琥珀君  阅读(473)  评论(0编辑  收藏  举报