make an iframe have pointer-events: none; but not on a div inside that

by MarcGuiselin

HTML

The iframe is designed to separate a ui interface created by an extension from the rest of the page so all the css and javascript can't affect our menu.  After 3ish years of web development i doubt this is possible since giving the iframe no pointerevents directly prevents clicking anything within it.  I don't need a solution anymore, but might as well still ask.
<br>
<button id="switch">give iframe pointer-events: none;</button>
<button id="cantclick">you can't click me because i'm behind the iframe</button>
<iframe/>

CSS

iframe{
  position:absolute;
  top:100px;
  left:0;
  width:500px;
  height:500px;
  padding:30px;
  background:rgba(200,0,0,0.1);
}
#cantclick{
  position:absolute;
  top:110px;
  left:10px;
}

JavaScript

var iframe=document.getElementsByTagName('iframe')[0],
    switchbutton=document.getElementById('switch'),
    cantclick=document.getElementById('cantclick');
iframe.contentDocument.body.innerHTML="<button>You can click me because i'm in the iframe!</button>";


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 relevant to the problem.<br><img 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'/>";
}