如何隐藏Bot窗口/iframe？Microsoft Bot Framework项目技术求助

嘿，我懂你遇到的困扰了——想给Bot的iframe加个显示/隐藏的切换功能，但之前写的代码没生效对吧？这大概率是因为你混淆了jQuery对象和原生DOM元素的属性用法，我给你几个靠谱的解决方案：

方案1：用jQuery的toggle()方法（最简单） #

jQuery专门提供了toggle()方法来一键切换元素的显示状态，一行代码就能搞定：

// 假设你用某个按钮触发切换，绑定点击事件
$('#toggleButton').click(function() {
  $('#iFrameId').toggle();
});

这个方法会自动检测iframe当前的显示状态，直接切换成相反状态（显示变隐藏，隐藏变显示），省心又高效。

方案2：操作原生DOM的hidden属性 #

你之前写的$('#iFrameId').hidden之所以没用，是因为hidden是原生DOM元素的属性，而jQuery对象本身没有这个属性。你需要先拿到原生DOM节点再操作：

$('#toggleButton').click(function() {
  const iframeElement = $('#iFrameId')[0]; // 获取原生DOM元素
  iframeElement.hidden = !iframeElement.hidden;
});

也可以用get(0)代替[0]，效果完全一样：$('#iFrameId').get(0).hidden = !$('#iFrameId').get(0).hidden;

方案3：手动控制display样式 #

如果你更习惯直接操作CSS样式，也可以通过修改display属性来实现切换：

$('#toggleButton').click(function() {
  const iframe = $('#iFrameId')[0];
  // 判断当前状态，切换显示/隐藏
  iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none';
});

额外注意点 #

如果你的iframe是动态加载的（比如页面加载后才通过JS插入到DOM中），直接绑定点击事件可能会失效，这时候得用事件委托：

// 绑定到document或者父级静态元素上
$(document).on('click', '#toggleButton', function() {
  $('#iFrameId').toggle();
});

另外，要是你想通过点击iframe本身触发隐藏，可能会遇到事件被iframe内部页面捕获的问题——这时候最好给iframe套个容器，点击容器来触发切换；或者在Bot的逻辑里加触发隐藏的指令，但单纯做显示隐藏的话，上面的方法已经足够直接好用啦。

内容的提问来源于stack exchange，提问作者shinjidev