Как вы можете сделать iframe с указателем-событиями: none; но не на div внутри?

У меня есть iframe с унаследованными pointer-events: none; но когда я вставил <div> в iframe с pointer-events: auto; div не будет реагировать на нажатия или любые события наведения мыши.

Причина этого заключается в том, что iframe находится внутри <div style="position:fixed;"> поэтому это своего рода небольшое меню. но я бы хотел, чтобы пользователь нажимал через iframe, а не через ссылки и элементы div в iframe.

И да, для этого абсолютно необходимо оставаться в фрейме.

Как я мог обойти это? Могу ли я вообще обойти это?

Вот простой пример: jsfiddle.net/MarcGuiselin/yLo119sw/2

Ответ 1

Вы работаете с position:absolute, в соответствии с примером, который вы загрузили на jsfiddle... Добавление z-index в "вы не можете щелкнуть меня, потому что я за кнопкой iframe" позволяет мне щелкните его.

Z-Index

EDIT: если вы хотите сделать pointer-events: none; всюду, кроме одного div, вы можете добавить pointer-events в каждый element вместо iframe. Согласно вашему примеру в скрипке, если вы хотите сохранить Николас Кейдж, но заблокируете другие события, вы можете сделать что-то вроде этого:

switchbutton.onclick=function(){
   this.innerHTML="reload to reset";
   //iframe.style.pointerEvents="none";
   cantclick.innerHTML="You can click me now! :)";
   iframe.contentDocument.body.innerHTML="<button>You can't click me now because my parent iframe is click-through! :(</button><br>or save this gorgeous image of your favorite actor which may or may not be relavant to the problem.<br><img id='nicholasCage' src='http://media2.popsugar-assets.com/files/2014/01/06/008/n/1922283/131b4126c7b8738f_thumb_temp_image333458751389045360.jpg.xxxlarge/i/Best-Nicolas-Cage-Memes.jpg'/>";

   var iframeBody = iframe.contentDocument,
       elements = iframeBody.querySelectorAll("*"),
       i,
       len = elements.length;

   for(i=0;i<len;i++){
       elements[i].style.pointerEvents="none";
   }

   iframeBody.getElementById("nicholasCage").style.pointerEvents="all";
}

Если вы можете использовать jQuery, вы можете сделать это быстрее, используя $("iframe *").css("pointer-events","none");

Ответ 2

Нет никакого способа сделать это, так как это будет еще одна проблема безопасности наряду с перехватом кликов.

Стили внутри iframe никак не взаимодействуют со стилями внутри хост-сайта. Так что если вы даже установите z-index/pointer-events или что-то еще в iframe и попытаетесь переопределить правило внутри него, это никак не будет применяться к правилам хост-сайта.

Так какое решение? Вы должны разделить свой iframe на несколько и возиться с их позицией.

Ответ 3

Не указывать весь iframe pointer-events: none. Внутри iframe установите правило CSS body * { pointer-events: none;}

Таким образом, iframe не блокирует события, однако элементы внутри iframe не могут быть интерактивными.

Ответ 4

Вы пробовали это?

pointer-events: inherit;

Я знаю, что вы уже получили свой ответ, но я думал, что это тоже может работать.