【前端学习】iframe标签以及postMessage解决iframe中的跨域问题

最新推荐文章于 2024-09-28 19:02:04 发布

JAMJAM_NoName

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量921

点赞数 7

文章标签：前端学习跨域通信 iframe

本文链接：https://blog.csdn.net/weixin_45626095/article/details/142529082

版权

面试中被问到跨域问题，并且面试官提出一个iframe嵌套页面中遇到跨域问题用纯前端解决跨域的方法。卡壳了~ 来学习一下~~

一. iframe标签介绍

<iframe>是html的一个行内块级元素，像行内元素一样会在一行中水平排列，又可以像块元素一样设置宽高。
<iframe>用于在一个网页中嵌入另一个网页
<iframe>默认有宽高（根据浏览器样式设定，通常：width300px height150px），存在边界
属性介绍:

src:指定内联网页地址；

frameborder:设置为0可以清除iframe的边界（已过时）
可通过样式修改： iframe{ border :none }

width：宽

height：高

scrolling:是否可滚动—yes、no，auto(根据页面内容)

二. iframe页面间的交互

每个iframe里各自维护自己的一个全局window对象。同源的iframe才能够进行互相的读写操作

在父级使用window.frames[name]可以获取子iframe的window对象,相应的可以获取document对象，从而对子iframe进行dom操作。
在子iframe想要操作父元素的iframe，直接使用子元素的window.parent来获取父级元素的window对象，从而获取document来操作dom。

那么我首先写一个简单页面，在页面下嵌套一个iframe标签。当前页面的url为http://127.0.0.1:5502/

<body>
    <h1>TITLE</h1>
    <iframe
      id="myiframe"
      src="http://192.168.20.10:8080/#/home"
      style="width: 100%; height: 70vh"
    >
    </iframe>
  </body>

页面能够正常展示，不受同源策略的限制是因为：同源策略的本质主要是为了保护浏览器环境下的敏感数据和 JavaScript 操作的安全性，而不是为了限制内容展示。 也就是说，同源策略主要用于限制JavaScript操作。

好的，那么我就尝试用JS操作一下iframe的页面。

<script>
    const myiframe = document.getElementById("myiframe");
    console.log(myiframe);
    console.log(myiframe.contentWindow);
 </script>

此时的控制台显示如下，看似能正常读取数据：
在这里插入图片描述

展开后如下，获取到iframe的window对象中的数据受到同源策略的限制：在这里插入图片描述
实现通信则需要通过获取到iframe的window对象,通过postMessage这个API发送信息。

//postMessage需继续研究…//

参考链接1
参考链接2

JAMJAM_NoName

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫