Question

我的团队目前正在使用Microsoft Bot Framework项目。我们正在显示机器人：

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

我们的客户询问是否显示/隐藏机器人iframe，是否可以使用iframe？我正在尝试示例代码，例如$（'＃iFrameId'）。hidden =！$（'#iFrameId'）。隐藏在iframe的click事件上，但它无效。

谢谢

Answer 1

是的，你可以隐藏iframe。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

let frame = document.getElementById("f");

function hideShow() {
  frame.height = frame.height == "0px" ? "150px" : "0px";
}

frame.addEventListener("click", hideShow);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

简单的解决方案是这样的：

使用CSS visibility:属性： -

document.getElementById("frame").style.visibility = "hidden";
document.getElementById("frame").style.visibility = "visible";

使用CSS display:属性： -

    function toggle() {
        var e = document.getElementById('frame');
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
     }

     <button onclick="toggle();">Toggle </button>
     <iframe id="frame" src="https://www.w3schools.com" style="visibility: visible;"></iframe>

如何隐藏Bot窗口/ iframe

2 个答案: