前端页面如何iframe向子页面传值

在前端页面中，可以通过使用postMessage()方法来实现iframe向子页面传值。首先，在子页面中添加一个按钮或者其他触发事件的元素，例如一个按钮元素。然后，使用JavaScript代码监听该按钮的点击事件，并在点击事件中使用window.parent.postMessage()方法将要传递的值发送给父页面。具体步骤如下：

1. 在子页面中，添加一个按钮或其他触发事件的元素。比如，在子页面的HTML代码中添加一个按钮元素，例如：

   <button id="admin-btn">传值</button>

2. 在子页面的JavaScript代码中，监听按钮的点击事件，并使用postMessage()方法将要传递的值发送给父页面。例如：

   $("#admin-btn").on('click', function(){
       event.stopPropagation(); // 防止事件冒泡
       let info = { msg: '我是子页面' };
       window.parent.postMessage(info, '*');
   });

这样，当点击按钮时，子页面将会向父页面传递一个包含具体信息的对象。父页面可以通过在mounted()或者其他适合的时机监听message事件来接收并处理子页面传递的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [iframe父页面与子页面如何传值](https://blog.csdn.net/qq_38475901/article/details/121768098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]