网站设计模板 psd,福田企业网站推广公司,教新手做网站难吗,网站增加导航栏写在前面
在前端开发过程中#xff0c;会遇到一些需要使用iframe的场景#xff0c;使用iframe关键的一个点是数据之间的传输#xff0c;基于同源的要求十分苛刻#xff0c;大家基本上是都是跨域的#xff0c;如果跨域进行数据传输呢#xff1f; 大家使用的比较多的就是p…写在前面
在前端开发过程中会遇到一些需要使用iframe的场景使用iframe关键的一个点是数据之间的传输基于同源的要求十分苛刻大家基本上是都是跨域的如果跨域进行数据传输呢 大家使用的比较多的就是postMessage()这个方法了下面将具体展示如何在html中使用iframe进行数据传输以及在angular框架中如何使用以及在angular中与html中的差异性
普通html页面
由外到内向iframe内网页传输数据
使用iframe处
bodyiframe src./iframe-content.html classiframe frameborder0/iframescriptconst iframeElement document.querySelector(.iframe);//需要等待iframe加载完成后再发送信息原因是 iframe的网页需要注册message事件若先发消息再注册那么在注册之前是收不到消息的iframeElement.addEventListener(load, () {//相当于iframe自己给自己发消息iframeElement.contentWindow.postMessage(这是一条信息, *);});/script/bodyiframe内容
bodyspan这里是iframe内容/spanscriptwindow.addEventListener(message, (event) {console.log(event.data);});/script
/body由内到外
使用iframe处 bodyiframe src./iframe-content.html classiframe frameborder0/iframescriptwindow.addEventListener(message, (event) {console.log(event.data);});/script/bodyiframe内容 bodyspan这里是iframe内容/spanscript//给上层级发消息若上层级是顶层可以使用window.topwindow.parent.postMessage(给使用处发消息, *);/script/body在Angular使用
首先是src 在angular中直接使用src链接会被认为是不安全的,需要通过DomSanitizer中的bypassSecurityTrustResourceUrl方法进行一个转化才可使用
constructor(private sanitizer: DomSanitizer
) {this.src this.sanitizer.bypassSecurityTrustResourceUrl(${path});
}其次是在获取iframe 可以通过 ViewChild来获取
ViewChild(iframe) iframeElement:ElementRefHTMLIFrameElement; 来进行获取通过监听iframe load事件来判断接受事件是否注册不能使用了 就需要在iframe内部传来一条信息来通知事件是否注册完成 iframeElement.addEventListener(load, () {iframeElement.contentWindow.postMessage(这是一条信息, *);});window.parent.postMessage(true); //通知app事件注册成功//接受iframe来的通知 基于rxjs去写事件的监听fromEventMessageEvent(window, message).pipe(map(data data.data)).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(isLoaded {if (isLoaded) {this.templatePreviewIframe.nativeElement.contentWindow.postMessage(数据);}});总结
html
iframe
#iframe
[src]src
frameborder0
/iframesrc:string;
ngUnsubscribe$ new Subject();
ViewChild(iframe) iframeElement: ElementRefHTMLIFrameElement;
constructor(private sanitizer: DomSanitizer
) {this.src this.sanitizer.bypassSecurityTrustResourceUrl(${path});
}ngOnInit(){fromEventMessageEvent(window, message).pipe(map(data data.data)).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(isLoaded {if (isLoaded) {this.templatePreviewIframe.nativeElement.contentWindow.postMessage(数据);}});
}ngOnDestroy(){this.ngUnsubscribe$.next();this.ngUnsubscribe$.complete();
}iframe内容网页
ngOnInit(){fromEvent(window, message).subscribe((event: MessageEventany) {//todo});window.parent.postMessage(true); //通知app事件注册成功
}
