这个方法是通信 要怎么拿到HTML对象并隐藏呢
时间: 2024-02-24 08:57:55 浏览: 22
如果要在父窗口中控制子窗口的 HTML 对象并隐藏它们,可以使用 postMessage API 实现跨文档通信,并在子窗口中编写 JavaScript 代码来响应消息并隐藏 HTML 对象。
具体步骤如下:
1. 在子窗口中编写 JavaScript 代码,监听来自父窗口的消息,例如:
```
window.addEventListener('message', function(event) {
// 判断消息来源是否是指定的父窗口
if (event.source !== window.parent) {
return;
}
// 接收来自父窗口的消息
var data = event.data;
// 处理消息
// ...
});
```
2. 在父窗口中调用子窗口的 sendMessage 函数,并传递需要隐藏的 HTML 对象的 ID,例如:
```
var iframe = document.getElementById('my-iframe');
iframe.contentWindow.sendMessage('hide', 'my-div');
```
3. 在子窗口中响应来自父窗口的消息,并根据消息内容来隐藏 HTML 对象,例如:
```
function hideElement(id) {
var el = document.getElementById(id);
if (el) {
el.style.display = 'none';
}
}
function handleMessage(type, data) {
switch (type) {
case 'hide':
hideElement(data);
break;
// 其他消息类型
// ...
}
}
function sendMessage(type, data) {
// 向父窗口发送消息
window.parent.postMessage({
type: type,
data: data
}, '*');
}
window.addEventListener('message', function(event) {
// 判断消息来源是否是指定的父窗口
if (event.source !== window.parent) {
return;
}
// 接收来自父窗口的消息
var msg = event.data;
// 处理消息
handleMessage(msg.type, msg.data);
});
```
在子窗口中响应来自父窗口的消息,并根据消息内容来隐藏 HTML 对象,可以通过 getElementById 方法来获取 HTML 对象,并设置其 style.display 属性为 'none' 来隐藏它。同时,在 sendMessage 函数中,需要将消息类型和数据封装成一个对象,并使用 postMessage API 向父窗口发送消息。