Vue写的前端如何调用外部的iframe中的TypeScript方法

4 min read

在 iframe 中暴露 TypeScript 方法:在 iframe 中的 TypeScript 代码中,您需要暴露该方法以便外部访问。您可以通过使用 window 对象将该方法绑定到 iframe 的 window 对象上,从而使其可以被外部访问。

window.tsFunction = function() {
  // TypeScript code here
}

使用 postMessage API 发送一条消息到 iframe,以便调用 TypeScript 方法。您需要将该方法名称作为参数传递,并在 iframe 中处理该消息以调用该方法。

let iframe = document.getElementById('iframe');
iframe.contentWindow.postMessage('tsFunction', '*');

在 iframe 中,监听 message 事件以处理来自外部的消息。在该事件处理程序中判断消息内容,并在需要时调用相应的 TypeScript 方法。

window.addEventListener('message', (event) => {
  if (event.data === 'tsFunction') {
    window.tsFunction();
  }
});