Разрешить кликабельным элементам за iframe

Question

Я пытаюсь встроить стороннего чат-бота (через iframe) в свое веб-приложение (ASP. NET MVC). Как и в случае с любым другим чат-ботом, в этом случае также отображается кнопка для запуска чата (правая часть экрана внизу), и при нажатии кнопки чат-бот расширяется, занимая всю правую часть веб-приложения (перекрытие кнопки, которые присутствовали в родительском окне). Ниже приведен фрагмент кода:

<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 чат-бота занимает всю правую часть реального Estate, никакие кнопки или ссылки за блоком не активны. Я пробовал следующие варианты:

1. Установка события-указателя: нет
2. Подписка на событие щелчка с помощью iframe и управление атрибутами (это своего рода хакерский способ, но это действительно не работает в моем случае из-за ограничения междоменного доступа).
3. Использование windows blur, чтобы определить щелчок (но это не так, поскольку способ закрыть чат-бота - это кнопка, встроенная в iframe ).

Пожалуйста, дайте мне знать, как go решить такую ​​же проблему.

Answer 1

Div вашего чат-бота занимает всю правую часть, потому что вы указываете ему делать это в css, задавая height: 100vh;. И объединение этого с position: fixed; и width: 390px; означает, что RHS для 390 пикселей из вашего окна используется вашим <div id="chatBot".... Также, используя z-index: 11111;, вы обязательно наложите его поверх всего на этой странице.

Значит, это не имеет ничего общего с вашим iframe. Просто чистый css. Но я полагаю, что проблема в том, что вы хотите, чтобы ваше окно чата достигло полной ширины при открытии. Затем вы должны создать решение javascript (или если вы используете некоторую структуру, которая позволяет вам условно отображать использование класса), чтобы динамически установить ширину на 100% или 100vh только при открытии чата и удалить это, когда чат закрыто.

Я также рекомендую вам использовать z-index только тогда, когда он вам действительно нужен, и старайтесь не использовать такие большие числа, потому что сложно поддерживать такой код.

Изменить: Вы можете сделать это, создав более широкий контекст z-index. Но тогда ваши кнопки будут отображаться поверх iframe чата.

Вы можете попробовать создать тот же контекст z-index для своего chatBot div, а также для контейнера кнопок, которые задают относительное отображение iframe и z-index: 1

Но это было бы проще работать с контекстами, если не использовать такие большие числа для z-index. (вот почему я сказал, что вам следует использовать меньшие z-index). В любом случае это тоже может сработать. Это не имеет большого значения. Это просто не очень хорошая практика.

Продолжение: обратите внимание, что если у вас есть элемент, позиционированный относительно, абсолютный или фиксированный с z-индексом, который уже является контекстом. Итак, если у вас есть другой элемент с позиционированием, но с немного большим z-index (скажем, первый имеет z-index: 1, а второй - z-index: 2), этот второй контекст будет более крупным, чем первый, несмотря ни на что. Итак, если у вас есть внутри первого элемента (без z-индекса) другой элемент, вы можете указать любой z-индекс, который хотите (например, 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 для контейнеров, только если у вас такой же контекст, вы можете позиционировать определенные элементы.