编程崽

登录

一叶在编程苦海沉沦的扁舟之上,我是那只激情自射的崽

iframe父子页面传值

iframe父子页面传值

同域名下

父页面中的iframe引入子页面:

html 复制代码
<iframe name="sunPage" id="sunPage" src="sun.html" width="300px" height="auto"></iframe>;

父iframe 调用子iframe的方法:

js 复制代码
$("#sunPage")[0].contentWindow.sunMethod();
// contentWindow 对象可以获取子iframe的window对象,兼容所有浏览器

父iframe 修改子iframe标签中的数据:如修改子iframe中的input的值:

js 复制代码
$('#sunPage').contents().find("#sunP").text("dsssssdd");

子iframe调用父iframe中的方法:

js 复制代码
// daoYo父页面的方法名
window.parent.daoYo("asdadasds");

子iframe 修改父iframe标签中的数据:如修改父iframe中的input的值,这个就不用说了.

js 复制代码
window.parent.$("#button3").text("ssssssssssss");

不同域名下-postMessage方法

父页面中的引用子页面

html 复制代码
<iframe src="s.html" frameborder="0"></iframe>

父页面向子页面传递数据

父页面发送参数

js 复制代码
// 星号 * 应该写的是该子页面的origin,这里可以直接写星号
window.frames[0].postMessage('父页面数据', '*');

子页面接收参数

js 复制代码
window.addEventListener('message', function (e) {
  console.log(e.data) // 打印传过来的数据
}, false);

子页面向父页面传递数据

子页面发送参数

js 复制代码
// 星号 * 应该写的是该父页面的origin,这里可以直接写星号
window.parent.postMessage('子页面的数据', '*');

父页面接收参数

js 复制代码
window.addEventListener('message', function (e) {
  console.log(e.data) // 打印传过来的数据
}, false);