Question

说明

当您将ifover悬停在透明叠加层中时，我需要访问iframe中的各个元素。这是一个在线HTML编辑软件。

它适用于Chrome / Firefox，但不适用于Internet Explorer（我正在使用IE10进行测试）

我在jsfiddle中重新创建了这个问题：demo

HTML：

<div id="frame-content">
    <iframe id="frame" style="width: 800px; background:transparent;" allowtransparency="true"></iframe>
    <div id="overlay"></div>
</div>

jQuery：

$(function () {
    var iframe = $("#frame")[0];
    var iframewindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
    $(iframewindow.document).find("body").append("<img src='http://quickbase.intuit.com/blog/wp-content/uploads/2011/02/CampsBaySunset.jpg'/>");

    $("#overlay").mousemove(function (e) {
        console.log("x:" + (e.pageX) + ", y:" + (e.pageY));
    });
});

CSS：

   #frame-content {
       overflow: auto;
       position: relative;
       width: 100%;
       height: 600px;
       display: block;
       top: 43px;
   }
   #frame-content iframe {
       transition: 0.1s linear;
       -moz-transition: 0.1s linear;
       -webkit-transition: 0.1s linear;
       background-color: #fff;
       border: 0;
       z-index: 1;
       border-radius: 0px;
       -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
       position:relative;
       display: block;
       margin: 0 auto;
       margin-bottom:-5000px;
       height: 5000px;
   }
   #overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       min-height: 100%;
       z-index: 2;
       -webkit-touch-callout: none;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       height:5000px;
   }

为什么在Internet Explorer上覆盖图像时，mousemove事件不会触发？

Answer 1

可能与IE处理空元素上的鼠标事件的方式有关。尝试在叠加层中添加背景以强制渲染：

#overlay {
     background-color:rgba(0,0,0,0);
}

或者可能是旧版本的透明gif bg。

Answer 2

尝试这里提到的解决方案：

z-index does not work in Internet Explorer with pdf in iframe

显然，IE在iframe上的图层存在问题。你的脚本很好，如果你只是在图像的边缘后面也可以工作，所以它显然只是分层的问题。

Asped

iFrame Overlay mousemove事件适用于Chrome但不适用于Internet Explorer

2 个答案: