Question

我知道我们可以像这样将iframe中的javascript变量传递给父框架：

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

iframe代码：

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

在父窗口中，我们可以定义如下函数：

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

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

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

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/

对于从父母到孩子的单向通信，请从父母访问iframe的contentWindow：

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

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

从父级传递JavaScript变量到iframe

1 个答案: