iframe通信

一、说说iframe的跨域

当文件目录如下，网站中有2个目录分别为a、b，并且各有一个index.html，a目录下还有个b.html：

a页面有4个iframe，分别以相对路径和绝对路径嵌入【/a/b.html】和【/b/index.html】，/a/index.html页面的body内容如下：

<!-- 不跨域 -->
<iframe src="./b.html" frameborder="0"></iframe>
<iframe src="/b/" frameborder="0"></iframe>

<!-- 跨域 -->
<iframe src="https://y49b984jt.lightyy.com/a/b.html" frameborder="0"></iframe>
<iframe src="https://y49b984jt.lightyy.com/b/" frameborder="0"></iframe>

代码里我就写了结论：在同域名的情况下，iframe访问绝对地址也算跨域。

二、iframe的同域通信（继上面a页面代码）：

父【/a/index.html】：

<script>
   function getToken(){
      console.log("开始获取")
      /*执行函数*/
      let token="asdfwfga"
      return token
    }
</script>

子【/a/b.html】和【/b/index.html】：

<script>
  let token = window.parent.getToken()
  console.log(token)
</script>

结果如下

 

三、跨域通信（以vue为例）：

使用postMessage(message, targetOrigin, [transfer]);

父页面：

<template>
	<div>
		<div class="frame-box"><iframe :src="framUrl" frameborder="0" class="frame-content" ref="iframeId"></iframe></div>
	</div>
</template>
<script>

export default {
	name: 'aframe',
	data() {
		return {
			framUrl: 'http://10.26.151.73:8081'
		};
	},
	watch: {
		framUrl: {
			handler: function(val, oldVal) {
				console.log(val);
			},
			deep: true
		}
	},
	components: {
	
	},
	created() {},
	mounted() {
		this.getInfo()
	},
	methods: {
		getToken(){
			return new Promise((resolve, reject) => {
				let token='a231cada21fas'
				resolve(token)
			})
		},
		setInfo(token) {
			//给子页面发消息
			this.$refs.iframeId.contentWindow.postMessage(
				{
					cmd: 'setToken', 
					res: {
						token: token
					}
				},
				'*'
			);
		},
		getInfo() {
			let self=this
			// 接受子页面发来的信息
			window.addEventListener('message', function(event) {
				var data = event.data;
				switch (data.cmd) {
					case 'searchToken':
						// 业务逻辑
						self.getToken().then(res=>{
							self.setInfo(res)
						})
						break;
				}
			});
		},
	}
};
</script>

子页面：

<template>
	<div class="index">
		<button @click="setInfo">按钮111</button>
	</div>
</template>
<script>

export default {
	name: 'index',
	data() {
		return {};
	},
	components: {
		
	},
	created() {},
	mounted() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			//接受父页面发来的消息
			window.addEventListener('message', event => {
				// 根据上面制定的结构来解析iframe内部发回来的数据
				const data = event.data;
				switch (data.cmd) {
					case 'setToken':
						// 业务逻辑
						console.log(data.res.token)
						break;
					case 'returnHeight':
						// 业务逻辑
						break;
				}
			});
		},
		setInfo() {
			//向父页面发消息
			window.parent.postMessage(
				{
					cmd: 'searchToken',
					params: {}
				},
				'*'
			);
		},
		
	}
};
</script>

注意点：targetOrigin开发的时候可以用 * ，生产环境别用 * ，用具体域名，以防受到origin攻击。