vue 如向加载中的iframe传递参数
时间: 2023-07-28 07:21:20 浏览: 180
vue与iframe之间的信息交互的实现
如果你想向加载中的iframe传递参数,可以使用postMessage API来实现。具体实现步骤如下:
1. 在父页面中添加监听事件,等待从iframe发送的消息。
```javascript
window.addEventListener('message', (event) => {
// 处理从iframe接收到的消息
});
```
2. 在iframe中发送消息。
```javascript
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('message', '*');
```
3. 在父页面中发送带参数的消息到iframe。
```javascript
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ data: 'message', params: { name: 'John' } }, '*');
```
4. 在iframe中接收到消息并进行处理。
```javascript
window.addEventListener('message', (event) => {
const { data, params } = event.data;
// 处理从父页面接收到的消息和参数
});
```
需要注意的是,postMessage API支持跨域传递消息,但是要注意安全问题,防止XSS攻击。同时,接收到的消息也需要进行合法性校验和处理。
阅读全文