javascript - 如何使用 Angular 6 从 Iframe 获取数据

标签 javascript angular typescript events iframe

我有一些 iframe:

<iframe src="/node_modules/collaborator-gallery/dist/index.html?id=3823&amp;auto_play=true&amp;track=true&amp;initialWidth=1290&amp;childId=pymd-aaeafe70-910d-494b-ac6b-e68d8eb2de66&amp;parentUrl=http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fexecute%2F20895"
width="100%" scrolling="no" marginheight="0" frameborder="0" class="embed-responsive-item" height="480px"></iframe>

通过它我使用了画廊。 我如何通过 Angular 6 中的另一个组件获取事件

最佳答案

在窗口 A 的脚本中,A 在 http://example.com:8080 上:

`var popup = window.open(...popup details...);
popup.postMessage("The user is 'bob' and the password is 'secret'", "https://secure.example.net");
popup.postMessage("hello there!", "http://example.com");`

`function receiveMessage(event) {
  if (event.origin !== "http://example.com")
    return;
  // event.data is "hi there yourself!  the secret response is: rheeeeet!"
}`
`window.addEventListener("message", receiveMessage, false);`

在调用 postMessage 后的某个时间调用

`

function receiveMessage(event) {
  if (event.origin !== "http://example.com:8080")
    return;
  // event.data is "hello there!"
  event.source.postMessage("hi there yourself!  the secret response " + "is: rheeeeet!", event.origin);
}`

window.addEventListener("消息", receiveMessage, false);

关于javascript - 如何使用 Angular 6 从 Iframe 获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52170003/

相关文章:

typescript - 如何在 typescript 中编写 Helper 类?

javascript - 如何在 Typescript 中添加带有扩展原型(prototype)的文件

node.js - 如何在 TypeScript 中动态访问对象属性

javascript - jQuery:查找具有特定自定义属性的元素

javascript - Jestjs 与 Expo-cli。不变违规 : Element type is invalid

javascript - JS : How to get values deeper then first level with dynamic keys in object?

javascript - 如何省略 0 和负数,但用户可以在 Angular Material 中输入例如 10

angular - Angular2 的管道如何与数据绑定(bind)一起工作?

javascript - 样式组件的 "css" Prop 和 Storybook 的 TypeScript 问题

javascript - 跟踪 JavaScript 对 Ctrl + F 的使用?