父頁面與子頁面互動

父頁面獲取子頁面的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為父頁面的方法