Question

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

iframe代码：

// here we call 'myFunction' which is a parent function

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

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

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

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

但是我的问题是如何从父级调用iframe函数。

更清楚地说，我希望在我的iframe中使用以下代码：

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

然后我希望能够在父级上致电myFunction(postMe); ...

注意：出于某些原因，我无法选择HTMLIFrameElement.contentWindow或window.frames['name']之类的iframe。

最终目标是：我想多次将变量从父级传递到iframe。 @CertainPerformance对此有一个解决方案，我无法使其正常工作。

iframe代码：

window.postMeToParent= "post me to parent";
window.parent.myFunction(postMeToParent, (response) => {
  console.log(response);
});

父代码：

function myFunction(postMeToParent, callback) {
  const postMeToiframe= "post me to iframe";

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

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

问题在于它只能通过iframe运行，而我不能调用该函数并从父级传递变量。

Answer 1

您可以将功能对象从iframe传递到父函数，然后从那里调用。

在父项上：

function tunnel(fn){
     fn('postMe');
}

在iframe上：

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

如果此时不会加载父文档，请尝试使用以下

var parentDocument = window.parent.document; 
$( parentDocument ).ready(function() { 
     window.parent.tunnel(myFunction); 
}

如何从父级调用iframe函数？

1 个答案: