如何根据 iframe 中 AJAX 调用的完成来运行函数

Posted 2023-05-09

【中文标题】如何根据 iframe 中 AJAX 调用的完成来运行函数

【英文标题】：How to run a function based on the completion of an AJAX call within an iframe

【发布时间】：2021-05-08 15:03:37

【问题描述】：

我有一个包含 iframe 的页面。页面和 iframe 都驻留在同一个域中。

在 iframe 中，对填充 iframe 中某些输入字段的某些数据进行了 AJAX 调用。

我需要从 iframe 中提取一个名为 useableData 的变量值返回到父页面。此变量值是在 AJAX 调用之后创建的。

我发现自己被困在了这一点上。我尝试对 iframe 进行 onload 函数调用，但我的变量返回为未定义。

尝试 #1

$(window).load(function () 
   var fName = $("#one-time-form")[0].contentWindow.useableData;
   console.log(fName);
);

意识到这不起作用，我直接在 iframe 元素上放置了一个 onload，然后重新设计了函数

尝试 #2

<iframe id="one-time-form" onload="testFunction();"></iframe>

function testFunction 
    var fName = $("#one-time-form")[0].contentWindow.useableData;
    console.log(fName);   
 

仍然什么都没有，它们都返回一个未定义的变量值。

然后我在jQuery中遇到了.ajaxStop函数并尝试了一下。

尝试 #3

$(document).ajaxStop(function() 
    var fName = $("#one-time-form")[0].contentWindow.useableData;
    console.log(fName);
);

这也返回了一个未定义的值，可能是因为它在父页面中被调用，而父页面开始时没有发起 Ajax 调用。

最后，我尝试使用 html API 进行本地存储。我在 AJAX 成功函数的 iframe 中定义了变量。

在 iframe 中设置本地存储

localStorage.setItem('fName', useableData);     

然后在 onload 函数调用中返回父页面我有这个

检索父页面中的区域设置存储

const sessData = localStorage.getItem('fName'); 
console.log ("session var called sessData is: " + sessData);

但是，我再次得到一个未定义的变量，大概是因为 AJAX 调用还没有完成。

【问题讨论】：

如果您可以控制 iframe 和父窗口中的代码，我建议使用 postMessage()

谢谢@RoryMcCrossan，我也尝试过，但在我最初的尝试中无法克服我的控制台错误。您可以提供一个框架示例吗？

当然，我刚刚在下面的答案中为您添加了一个示例

【参考方案1】：

如果您可以同时控制 iframe 和父窗口中的代码，我建议您使用 postMessage()

// in the iframe:
$(window).load(function () 
  let message =  useableData: $("#one-time-form")[0].contentWindow.useableData 
  window.parent.postMessage(message, '*');
);

// in the parent:
window.addEventListener("message", e => 
  let useableData = e.data.useableData;
);

【讨论】：

感谢一百万，这是我在解决这个问题时得到的最接近和最有帮助的答案。在我的实施过程中，我收到了一个控制台错误。仅在新评论中发布

未捕获的 DOMException：无法在“窗口”上执行“postMessage”

您使用的是哪个浏览器？另外，尝试在第二个参数中设置父窗口的实际域，而不是 '*' - 我只使用它作为占位符。

@RoryMcCrossan 我明白了，我用手指指了一个括号。一切都好，我正在将我的价值正确地记录回我的父页面。对于这个解决方案，我非常感谢。比我尝试过的其他清洁得多！

【参考方案2】：

一般来说，为了与 iframe 通信，（通常）需要使用postMessage 来发送和接收数据，您可以采用一个简单的示例：

<iframe id=oy src="something"></iframe>

然后是“某事”网址的来源..

<script>
onmessage = e => 
    e.source.postMessage("hi bacK!", "*")

</script>

现在回到主文件...（续）

<script>
oy.postMessage("hi there, what's going on?")
oy.onmessage = e => console.log(e)
</script>