iframe

iframe 跨域用 onmessage 处理

父页面向 iframe 传递数据

window.frames['checkIframe'].postMessage('msg', '*')

iframe 接收父页面传递的数据

window.addEventListener(
  'message',
  function(e) {
    console.log(e.data)
    console.log(e.source == window.parent)
  },
  false
)

iframe 向父页面传递数据

window.parent.postMessage('done', '*')

父页面接收 iframe 传递的数据

window.addEventListener(
  'message',
  function(e) {
    if (e.data === 'done') {
    }
  },
  false
)

iframe 获取父、子窗口的元素和方法

子页面获取父页面的 id=care 的子页面

parent.care.location.reload();

父页面获取 id=imp 的子页面

imp.location.reload();

1.jquery 在 iframe 子页面获取父页面元素和方法代码如下:

parent.$("selector");

parent.method();

2.jquery 在父页面获取 iframe 子页面的元素和方法

代码如下:

iframe.$("select");

iframe.method();

3.js 在 iframe 子页面获取父页面元素代码如下:

window.parent.document.getElementById("元素 id");

4.js 在父页面获取 iframe 子页面元素代码如下:

window.frames["iframe_ID"].document.getElementById("元素 id");

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

DOM 元素访问

获取到页面的 window.document 对象后，即可访问 DOM 元素