【前端学习】iframe标签以及postMessage解决iframe中的跨域问题
iframe>是html的一个行内块级元素，像行内元素一样会在一行中水平排列，又可以像块元素一样设置宽高。<iframe>用于在一个网页中嵌入另一个网页<iframe>默认有宽高（根据浏览器样式设定，通常：width300px height150px），存在边界src:指定内联网页地址；:设置为0可以清除iframe的边界（已过时）可通过样式修改：width：宽height：高scrolling:
面试中被问到跨域问题，并且面试官提出一个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需继续研究…//
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)