iframe父页面与子页面如何传值

最新推荐文章于 2025-03-14 16:54:39 发布

王等等csdn

最新推荐文章于 2025-03-14 16:54:39 发布

阅读量9.9k

点赞数 6

文章标签： javascript 前端 vue.js iframe

本文链接：https://blog.youkuaiyun.com/qq_38475901/article/details/121768098

版权

本文详细介绍了在Web开发中如何实现父页面向子页面传递值，以及子页面向父页面传递值的方法，包括使用postMessage API进行跨窗口通信。同时，还展示了如何实现在窗口大小变化时，iframe高度自动适应页面布局的高度差，确保内容完整显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.父页面向子页面传值

parent.vue

<template>
    <iframe id="iframe" width="100%" :src="src"></iframe>
</template>
<script>
export default {
	data() {
        return {
            iframe: null,
            src: '', //需要加载的子页面url
        }
    },
    async mounted(){
	    var that = this
	    this.iframe = document.getElementById('iframe')
	    this.iframe.onload = function(){
	        // iframe加载完成后要进行的操作
	        that.postMsg()
	    }  
		// if (iframe.attachEvent){ // 兼容IE写法
        //     iframe.attachEvent("onload", function(){
        //         // iframe加载完成后要进行的操作
        //         postMsg()
        //     })
        // } else {
        //     iframe.onload = function(){
        //         // iframe加载完成后要进行的操作
        //         postMsg()
        //     }
        // }
	},
	methods: {
        async postMsg() {
        	//将token传递给子页面
            let token = await this.$user.getToken()
            let param = {
                token
            }
          	this.iframe.contentWindow.postMessage(param,'*')
        },
    }
}

子页面

var token = ''

window.addEventListener('message', function(e) {
  	console.log(e.data)
    token = e.data.token
    //执行其他操作
})

二.子页面向父页面传值

子页面

<button id="admin-btn">传值</button>
$("#admin-btn").on('click', function(){
   event.stopPropagation()
    let info = {
        msg: '我是子页面'
    }
    window.parent.postMessage(info, '*');
})

parent.vue

created() {
    var that = this
    // 接收子页面传送的数据
    window.addEventListener('message', function (e) {
        var data = e.data;
        console.log(data.msg) //我是子页面
        //执行其他操作
    });
},

三.iframe 高度自适应

created() {
   var that = this
    window.addEventListener('resize', function (e) {
        const deviceHeight = document.documentElement.clientHeight;
        this.iframe.style.height = deviceHeight+ 'px'; //数字是页面布局高度差
    });
},
async mounted(){
    var that = this
    this.iframe = document.getElementById('iframe')
    const deviceHeight = document.documentElement.clientHeight;
    this.iframe.style.height = deviceHeight+ 'px'; //数字是页面布局高度差
},