在 Ember 中捕获 iframe 加载事件

Question

我需要知道iframe何时加载了它的内容，我试图坚持Ember的做事方式。

<iframe src="" {{action "onLoad" on="load"}}></iframe>

这看起来非常简单明了，但这种行动从未被调用。有谁知道我可能做错了什么？或者也许是检测这种事情的更好方法？

Answer 1

更新

在 my-component.hbs 中创建名为 my-component 的组件

<iframe src="" onload={{action "onLoading"}}></iframe>

在我的组件中.js

import Ember from 'ember';
export default Ember.Component.extend({    
actions: {
onLoading() {
console.log('OnLoad');
}
}
});

即使它不在组件中，这也将起作用。

---

在这里你可以找到支持的事件列表.https：//guides.emberjs.com/v2.10.0/components/handling-events/#toc_event-names

但是没有提到load. 所以我怀疑你需要在自定义事件中提到这一点。 您可以尝试在app.js文件中的自定义事件对象中定义onload事件

App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver,
customEvents:{
load:'load'
}
});

参考：
https://emberjs.com/api/ember/2.14.0/classes/Ember.Application/properties/customEvents?anchor=customEvents

Answer 2

这不是很好，但这代替了任何更好的解决方案。

import Ember from 'ember'
export default Ember.Route.extend({
activate() {
Ember.run.schedule('render', () => {
Ember.$('iframe').one('load', () => { this.send('onLoad') })
})
}
})

每次输入路径时，这将在路由的模板完成渲染后运行。它从 iframe 捕获加载事件，并手动触发操作以让 Ember 接管事情。不完美，但也不可怕。