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

这篇具有很好参考价值的文章主要介绍了iframe通过postMessage进行跨域通信以及在Angular中使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写在前面

在前端开发过程中,会遇到一些需要使用iframe的场景,使用iframe关键的一个点是数据之间的传输,基于同源的要求十分苛刻,大家基本上是都是跨域的,如果跨域进行数据传输呢?
大家使用的比较多的就是postMessage()这个方法了,下面将具体展示如何在html中使用iframe进行数据传输,以及在angular框架中如何使用以及在angular中与html中的差异性

普通html页面

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

使用iframe处
<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内容
<body>
  <span>这里是iframe内容</span>
  <script>
    window.addEventListener("message", (event) => {
      console.log(event.data);
    });
  </script>
</body>

由内到外

使用iframe处
  <body>
    <iframe src="./iframe-content.html" class="iframe" frameborder="0"></iframe>
    <script>
      window.addEventListener("message", (event) => {
        console.log(event.data);
      });
    </script>
  </body>
iframe内容
 <body>
    <span>这里是iframe内容</span>
    <script>
      //给上层级发消息,若上层级是顶层可以使用window.top
      window.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:ElementRef<HTMLIFrameElement>; 来进行获取
  • 通过监听iframe load事件来判断接受事件是否注册不能使用了 ,就需要在iframe内部传来一条信息来通知事件是否注册完成
  iframeElement.addEventListener("load", () => {
        iframeElement.contentWindow.postMessage("这是一条信息", "*");
      });
  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

<iframe
#iframe
[src]="src"
frameborder="0"
></iframe>
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内容网页文章来源地址https://www.toymoban.com/news/detail-685970.html

ngOnInit(){
    fromEvent(window, 'message').subscribe((event: MessageEvent<any>) => {
        //todo
    });
    window.parent.postMessage(true); //通知app事件注册成功
}

到了这里,关于iframe通过postMessage进行跨域通信以及在Angular中使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity通过TCP/IP协议进行通信

    uinty项目中需要与C++编写的硬件进行通信,因此采用TCP/IP协议进行通信,主要实现了与服务器的连接、通信内容的发送以及断开连接等功能。 根据确定好的协议格式,编写需要发送的内容,将其转为字节流(byte[])通过通信接口进行发送即可。具体代码如下:

    2024年02月11日
    浏览(39)
  • Angular:跨域请求携带 cookie

    1. 新建文件夹 http-interceptors 2. 新建拦截器 common.interceptor.ts 3. 用一个数组汇总起来,统一引入: index.ts (后续需要添加拦截器,只需加入到该数组即可) 4. 引入拦截器使用: service.module.ts

    2024年01月23日
    浏览(51)
  • Angular: 配置 proxy 解决跨域

    2024年01月23日
    浏览(40)
  • 一种通过udp进行无确认ip的双向的通信

    udp是一种不可靠的通信,但是有些时候还是会有使用。今天分享一个示例:主体逻辑,一个端口广播地址,接收到ip地址数据后,其他端口基于这个ip进行bind绑定,最后通信,这样可以保证我们后续继续增加端口交互时候不需要关注ip地址绑定的问题。 作者:良知犹存 转载授

    2023年04月09日
    浏览(37)
  • iframe跨域问题:Uncaught DOMException: Blocked a frame with origin解决方法

    在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中;但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面显然直接取不到iframe的值,因为这是跨域的(前台页面与后台页面不在同一个

    2024年02月11日
    浏览(31)
  • VLAN的划分以及通过DHCP给所有主机自动分配IP,以及通信全网可达

    目录  1. 要求  2.拓扑图 3. 分析: 4. 配置: 4.1. 交换机的配置(vlan划分和设置trunk链路): 4.2. 路由器r1和r2的配置(接口ip,DHCP,静态路由) 5. 验证:   在每台交换机中分别创建vlan2和vlan3,并将图中pc1、pc3、pc5划分到对应的交换机的vlan2中、将pc2、pc4、pc6划分到对应交换机

    2024年02月09日
    浏览(51)
  • Unity WebGl和前端(Angular)相互调用(含跨域问题)

    在Unity官方文档中就已经介绍了Unity和JS相互调用的问题,但是我们实际的应用中往往是使用iframe来展示WebGL。这样不但是webgl和js相互调用的问题,还包含了iframe跨域的问题。 我们的项目中前端使用的是angular框架,就以angular为基础来说一下这个问题,当然vue的前端框架应该都

    2024年02月15日
    浏览(44)
  • iframe之间的通信

    iframe标签可以实现html主页面嵌套html子页面,那么父子页面间的传值是怎么进行的呢? ① 父页面监听iframe消息: ② 父页面发送给iframe页面的消息: ③ iframe页面监听父页面发过来的消息: ④ iframe页面给父页面发送消息:

    2024年02月11日
    浏览(29)
  • iframe标签下的通信

    通常在页面中嵌套iframe的情况下还需要进行消息传递的通信需求。一般分为两种情况: 1.iframe里的链接与父页面链接是非跨域         这种情况处理比较简单,直接在父级页面下就可以写脚本控制iframe里的元素,同时对iframe里的元素进行操作,例如绑定事件,当事件触发时发

    2024年02月12日
    浏览(34)
  • 通过串口中断的方式进行ASR-01S模块与STM32通信(问题与解决)

    最近在做一个智能家居的项目,需要实现语音控制的功能,于是我选用了ASR-01S模块与STM32通信,这个模块最大的好处在于有配套的编程软件和语音库,不用自己训练且编程简单(少儿编程的程度)。ASR-01S的代码架构在这不多说,总之在收到语音后它会通过串口发送一串命令给

    2024年04月22日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包