目录

iframe通过postMessage进行跨域通信以及在Angular中使用

写在前面

在前端开发过程中,会遇到一些需要使用iframe的场景,使用iframe关键的一个点是数据之间的传输,基于同源的要求十分苛刻,大家基本上是都是跨域的,如果跨域进行数据传输呢?

大家使用的比较多的就是postMessage()这个方法了,下面将具体展示如何在html中使用iframe进行数据传输,以及在angular框架中如何使用以及在angular中与html中的差异性

普通html页面

由外到内(向iframe内网页传输数据)

使用iframe处

javascript 复制代码
<body>
    <iframe src="./iframe-content.html" class="iframe" frameborder="0"></iframe>
    <script>
      const iframeElement = document.querySelector(".iframe");
      //需要等待iframe加载完成后再发送信息,原因是 iframe的网页需要注册message事件,若先发消息再注册,那么在注册之前是收不到消息的
      iframeElement.addEventListener("load", () => {
        //相当于iframe自己给自己发消息
        iframeElement.contentWindow.postMessage("这是一条信息", "*");
      });
    </script>
  </body>

iframe内容

javascript 复制代码
<body>
  <span>这里是iframe内容</span>
  <script>
    window.addEventListener("message", (event) => {
      console.log(event.data);
    });
  </script>
</body>

由内到外

使用iframe处

javascript 复制代码
  <body>
    <iframe src="./iframe-content.html" class="iframe" frameborder="0"></iframe>
    <script>
      window.addEventListener("message", (event) => {
        console.log(event.data);
      });
    </script>
  </body>

iframe内容

javascript 复制代码
 <body>
    <span>这里是iframe内容</span>
    <script>
      //给上层级发消息,若上层级是顶层可以使用window.top
      window.parent.postMessage("给使用处发消息", "*");
    </script>
  </body>

在Angular使用

  • 首先是src 在angular中直接使用src链接会被认为是不安全的,需要通过DomSanitizer中的bypassSecurityTrustResourceUrl方法进行一个转化才可使用
javascript 复制代码
constructor(
    private sanitizer: DomSanitizer
) {
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`${path}`);
}
  • 其次是在获取iframe 可以通过 @ViewChild来获取
javascript 复制代码
@ViewChild('iframe') iframeElement:ElementRef<HTMLIFrameElement>; 来进行获取
  • 通过监听iframe load事件来判断接受事件是否注册不能使用了 ,就需要在iframe内部传来一条信息来通知事件是否注册完成
javascript 复制代码
  iframeElement.addEventListener("load", () => {
        iframeElement.contentWindow.postMessage("这是一条信息", "*");
      });
javascript 复制代码
  window.parent.postMessage(true); //通知app事件注册成功

  	//接受iframe来的通知 基于rxjs去写事件的监听
   fromEvent<MessageEvent>(window, 'message').pipe(map(data => data.data))
    .pipe(takeUntil(this.ngUnsubscribe$))
    .subscribe(isLoaded => {
        if (isLoaded) {
            this.templatePreviewIframe.nativeElement.contentWindow.postMessage(数据);
        }
    });

总结

html

go 复制代码
<iframe
#iframe
[src]="src"
frameborder="0"
></iframe>
go 复制代码
src:string;
ngUnsubscribe$= new Subject();
@ViewChild('iframe') iframeElement: ElementRef<HTMLIFrameElement>;
constructor(
    private sanitizer: DomSanitizer
) {
    this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`${path}`);
}

ngOnInit(){
    fromEvent<MessageEvent>(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内容网页

go 复制代码
ngOnInit(){
    fromEvent(window, 'message').subscribe((event: MessageEvent<any>) => {
        //todo
    });
    window.parent.postMessage(true); //通知app事件注册成功
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
恋猫de小郭1 分钟前
Android Vulkan 官宣转正并统一渲染堆栈 ,这对 Flutter 又有什么影响?
android·前端·flutter
孩子 你要相信光3 小时前
安卓edge://inspect 和 chrome://inspect调试移动设备上的网页
前端
乐闻x4 小时前
提升 React 应用性能:使用 React Profiler 进行性能调优
前端·javascript·react.js·性能优化
gotoc丶5 小时前
堆排序:力扣215.数组中的第K个大元素
javascript·数据结构·算法·leetcode·排序算法
NaZiMeKiY6 小时前
HTML5前端第二章节
前端·html·html5
天若有情6736 小时前
深入浅出:HTML 中 <a> 标签嵌入链接教程
前端·html
烂蜻蜓6 小时前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽6 小时前
Webpack 优化深度解析:从构建性能到输出优化的全面指南
前端·webpack·node.js
大龄大专大前端8 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流8 小时前
【SpringMVC】常用注解:@SessionAttributes
java·服务器·前端