Angular - 使用Iframe
1. 使用
<iframe id='iframe' width='100%' height='400px' frameborder='no' border='0' scrolling='no' src={this.url} />
2. 窗体传值
frame加载完成再处理传值
const iframe: any = document.querySelector('#iframe'); if (iframe.attachEvent) { iframe.attachEvent('onload', () => { this.updateIframeAttribute(iframe); }); } else { iframe.onload = () => { this.updateIframeAttribute(iframe); }; }
通过postMessage 窗体传值
private updateIframeAttribute(iframe: any) { iframe.contentWindow.postMessage(this.instanceRecords || [], '*'); // 传送数据,xxx }
接收值
private messageSub: Subscription; if (this.messageSub) { this.messageSub.unsubscribe(); } this.messageSub = fromEvent(window, 'message').subscribe((s: any) => { if (s.data instanceof Array) { // 这里通过传送过来的数据类型,来区分message 多次触发问题 console.log(s.data); this.instanceRecords = s.data; } });