在 Ember 中捕获 iframe 加载事件

Question

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

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

这看起来非常简单明了，但该操作永远不会被调用。有谁知道我可能做错了什么？或者也许有更好的方法来检测这种事情？

Answer 1

更新

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

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

在我的-component.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 文件

中的 customEvents 对象中定义 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 接管一切。不完美，但也不糟糕。

在 Ember 中捕获 iframe 加载事件

Catch an iframe load event in Ember

javascript

iframe

ember.js