javascript - 将 javascript 变量从父级传递到 iframe

Question

我知道我们可以将 javascript 变量从 iframe 传递给父框架，如下所示：

如果父窗口和 iframe 都在同一个域中，我们可以调用父窗口的函数：

iframe 代码：

window.postMe = "postMe value here";
window.parent.myFunction(postMe);

在父窗口中，我们可以这样定义一个函数：

function myFunction(postMe) {
    ((console&&console.log)||alert)("postMe= " + postMe);
}

上面的代码正确记录了“postMe”值。

但我的问题是如何修改此代码以便将“postMe”从父级传递到 iframe？

标签： javascript

Answer 1

如果要继续myFunction在父级上使用，可以让父级函数接受子级传递的回调：

window.postMe = "postMe value here";
window.parent.myFunction(postMe, (response) => {
  console.log(response);
});

function myFunction(postMe, callback) {
  const val = "postMe= " + postMe;

  // do something with val in parent:
  ((console&&console.log)||alert)(val);

  // do something with val in child:
  callback(val);
}

请参阅此处进行现场演示（由于沙盒问题，无法作为堆栈片段嵌入）：

https://jsfiddle.net/kc24onbq/

对于从父级到子级的单向通信，从父级访问contentWindowiframe 的：

// child
function childFn(val) {
  console.log(val);
}

// parent
iFrameElement.contentWindow.childFn('foo');