前端跨域通信--【iframe上篇】

最新推荐文章于 2024-08-14 09:30:44 发布

cc百川

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量641

点赞数

分类专栏： web前端文章标签：前端跨域通信 iframe标签注意事项 postMessage的使用 domain的使用 iframe标签后续内容不渲染

本文链接：https://blog.csdn.net/ljcc122/article/details/106429704

版权

本文探讨了在前端开发中遇到的iframe跨域问题，包括iframe内容不显示的解决方法，主域相同但子域不同的同源策略设置，以及主域不同的情况下如何利用postMessage进行通信。内容涵盖了iframe的正确使用方式，以及实践中的注意事项和效果展示。

摘要由CSDN通过智能技术生成

需求：
在内部的业务中，通过iframe引用了外部业务，当执行外部业务是，内部业务停止或禁用（仅可查看模式）,这里外部业务执行完毕会发出通知，这里我们需要依据这个通知进行处理内部业务，例如提交等。
原型图：
在这里插入图片描述

采坑

iframe 后续内容（元素，js，css等）不显示

使用iframe标签需使用双标签闭合

也许你需要的是这样的页面：
在这里插入图片描述
采坑注意：

这里简直怀疑人生了，这点代码，这么点逻辑都不行，网上说只要吧js部分放到irame之前即可【这样只是处理了js部分，那么剩余的元素内容则处理不了】我们只需要记住，iframe必须使用双标签闭合

主域相同：子域不同domain设置同源

实现

在这里插入图片描述

效果：如下

在这里插入图片描述

主域不同：通过postMessage进行通信

实现

在这里插入图片描述

效果：如下

在这里插入图片描述

这里是代码【可以忽略】

oa.html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>OA的业务页面</title>
</head>
<body>
<div id="oa" style="text-align: center">
    <div>OA的业务页面</div>
    <button class="oa_btn" onclick="sendmsg()">执行oa某业务</button>
    <button