javascript - 如何隐藏机器人窗口/iframe

Question

我的团队目前在 Microsoft Bot Framework 元素中工作。我们正在展示机器人:

<iframe src="https://webchat.botframework.com/embed/YOUR_BOT_ID?s=YOUR_SECRET_HERE"></iframe>

我们的客户询问有关显示/隐藏机器人 iframe 的问题，是否可以使用 iframe 来实现？我正在尝试 $('#iFrameId').hidden = !$('#iFrameId').hidden 之类的示例代码在 iframe 的点击事件中，但它不起作用。

谢谢

Answer 1

是的，您可以隐藏 iframe。

例如:

function hideShow() {
  let frame = document.getElementById("f");
  frame.style.visibility = frame.style.visibility == "visible" ? "hidden" : "visible";
}

<iframe id="f" src="https://wikipedia.org" style="visibility: visible;"></iframe>
<button onclick="hideShow();">Hide/Show</button>

更新:(我的评论中的解决方案 2)单击 iframe 的边框以隐藏 iframe。

let frame = document.getElementById("f");

function hideShow() {
  frame.height = frame.height == "0px" ? "150px" : "0px";
}

frame.addEventListener("click", hideShow);

#f {
  border-top: #0c0 20px solid;
}

<iframe id="f" src="https://wikipedia.org" height="150px"></iframe>