允许 iframe 后面的元素可点击

Posted 2023-03-06

【中文标题】允许 iframe 后面的元素可点击

【英文标题】：Allow elements behind iframe to be clickable

【发布时间】：2020-08-19 19:35:03

【问题描述】：

我正在尝试将第三方聊天机器人（通过 iframe）嵌入到我的 Web 应用程序（ASP.NET MVC）中。与任何其他聊天机器人一样，在这种情况下，也会显示一个按钮来启动聊天（屏幕下方的 RHS），单击该按钮时，聊天机器人会展开以占据 web 应用程序的整个 RHS（重叠按钮，它们出现在父窗口上）。以下是sn-p代码：

<div id="chatBot">    
    <iframe frameborder="0" id="chatwindow" src="@System.Web.Configuration.WebConfigurationManager.AppSettings["ChatBotUrl"]"></iframe>
</div>

CSS：

#chatwindow 
    height: 100vh;
    width: 100%;
    right: 15px;    


#chatBot 
    position: fixed;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 390px;
    z-index: 11111;    

现在我面临的问题是，由于聊天机器人 div 占据了整个 RHS 空间，因此 div 后面的任何按钮或链接都不可点击。我确实尝试了以下选项：

设置指针事件：无 在 iframe 中订阅 click 事件并操作属性（这是一种 hacky 方式，但由于跨域限制，这在我的情况下不起作用）。 使用 windows blur 来推断点击（但这并不是关闭聊天机器人的方法是通过嵌入 iframe 中的按钮）。

请告诉我，如何解决同样的问题。

【问题讨论】：

什么是“RHS 房地产”？

这有帮助吗？ ***.com/questions/23847038/…

@Teemu 位于屏幕的右侧（宽度如 css 中所述）

@Roy，是的，我试过了，但它对我不起作用。

好的，我还以为是spam ...

【参考方案1】：

您的聊天机器人 div 占用了整个 RHS，因为您在 css 中通过设置 height: 100vh; 告诉它这样做。将它与position: fixed; 和width: 390px; 结合使用意味着您的<div id="chatBot"... 使用了距离您的窗口390 像素的RHS。同样使用z-index: 11111;，您肯定会将其覆盖在该页面上的所有内容上。

所以这与您的 iframe 无关。只是纯CSS。但我想问题是你希望你的聊天窗口在打开时达到全宽。比你应该构建一个javascript解决方案（或者如果你使用一些允许你有条件地渲染一个类的框架）来动态地将宽度设置为100％或100vh，只有在聊天打开时，并在聊天关闭时删除它.

我还建议您仅在真正需要时才使用 z-index，并尽量不要使用如此大的数字，因为这样的代码很难维护。

编辑： 您可以通过创建更大的z-index 上下文来做到这一点。但是随后您的按钮将显示在您的聊天 iframe 上。

您可以尝试为您的 chatBot div 和按钮容器创建相同的 z-index 上下文，这使 iframe 显示相对和 z-index: 1

但是，如果您不为 z-index 使用如此大的数字，则使用上下文会更容易。 （这就是为什么我说你应该使用更小的z-index）。无论如何，这也可以工作。没关系。只是不是一个很好的做法。

继续：请注意，如果您有一个相对、绝对或固定的元素，其 z-index 已经是一个上下文。因此，如果您有另一个元素的定位但 z-index 稍大（假设第一个具有 z-index:1 和第二个具有 z-index:2），那么第二个上下文将比第一个上下文更重要，无论如何。因此，如果您在第一个元素（没有 z-index）中有另一个元素，您可以提供您想要的任何 z-index（例如z-index: 99999）它只会在第一个上下文中具有那个巨大的索引。因此，如果重叠，将显示在第二个元素下。 示例：

.big-z-index 
  position: absolute;
  z-index: 9999;
  background:red;
  width: 100px;
  height:50px

.small-z-index 
  position: absolute;
  z-index: 2;
  background:blue;
  width: 50px;
  height:20px

<div style="position: absolute; z-index:1">
  <div class="big-z-index"></div>
</div>
<div class="small-z-index"></div>

因此，如果容器上有 z-index 上下文，则只有在具有相同上下文的情况下才能定位某些元素。

【讨论】：

感谢您的回复。你的推论是正确的，我需要聊天机器人占据 CSS 中提到的空间（我不希望聊天窗口占据整个宽度，但只希望聊天机器人 div 后面的链接和按钮可点击） .由于聊天机器人是通过 iframe 集成的，我无法控制点击聊天机器人按钮来展开和折叠聊天窗口。

我会编辑我的答案，因为我不能在这里写这么多，而且很难阅读。