iframe父子页面传值

title: iframe父子页面传值 id: 2fb7818c5be750ff26d1338ece3a0a75 tags: [] date: 2000/01/01 00:00:00 updated: 2023/03/04 19:29:12 isPublic: true --#|[分隔]|#--

iframe父子页面传值

同域名下

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

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

父iframe 调用子iframe的方法:

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

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

$('#sunPage').contents().find("#sunP").text("dsssssdd");

子iframe调用父iframe中的方法:

// daoYo父页面的方法名
window.parent.daoYo("asdadasds");

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

window.parent.$("#button3").text("ssssssssssss");

不同域名下-postMessage方法

父页面中的引用子页面

<iframe src="s.html" frameborder="0"></iframe>

父页面向子页面传递数据

父页面发送参数

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

子页面接收参数

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

子页面向父页面传递数据

子页面发送参数

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

父页面接收参数

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