iframe内のマウスの位置を決定しますが、親を含む

Question

私は右クリックを検出し、マウスイベントを親の関数に渡すiframeを持っています。ここで（親関数内で）、私はカスタムコンテキストメニューを表示するロジックを持っており、コンテキストメニューのhtmlマークアップは親DOMに挿入されています。したがって、ビューポート（または親DOM）に従ってマウスの位置が必要ですが、受け取ったのはiframeからの相対位置です。

私はoffsetTopとoffsetParentを使用しようとしましたが、これはインナーページのbodyタグまでしか反復しませんでした。

Answer 1

：

// Define class that will hold Object coordinates 
function CTopLeft(i_nTop, i_nLeft) { 
    this.nTop = i_nTop; 
    this.nLeft = i_nLeft; 
} 

function GetTopLeftFromIframe(i_oElem) { 
    var cTL = new CTopLeft(0, 0); 
    var oElem = i_oElem; 
    var oWindow = window; 

    do { 
     cTL.nLeft += oElem.offsetLeft; 
     cTL.nTop += oElem.offsetTop; 
     oElem = oElem.offsetParent; 

     if (oElem == null) { // If we reach top of the ancestor hierarchy 
     oElem = oWindow.frameElement; // Jump to IFRAME Element hosting the document 
     oWindow = oWindow.parent; // and switching current window to 1 level up 
     } 
    } while (oElem) 

    return cTL; 
} 

これはhttp://codecorner.galanter.net/2012/02/26/absolute-coordinates-of-element-inside-of-iframe/

Answer 2

親文書からiframeを呼び出すことで、左上と左を取得できます。

offset_left = parent.document.getElementById('my_iframe').offsetLeft; 
offset_top = parent.document.getElementById('my_iframe').offsetTop; 

しかしiframe内にコンテンツが 同じ起源（同じホスト、ポート、およびプロトコル）に属している場合にのみ動作します：あなたのiFrameが親文書にID 'my_iframe'を持っていると言います！

編集：これは私が使用する機能であるiframe relative mouse position

Answer 3

ユーリー・ソリューションからでもあるbytes.comでこの同様の質問を見つけました要素がposition：absoluteでスクロールされている要素の子になるまでうまく動作します。 （私はむしろ、マウスよりも、要素の位置を探していましたが、私はあなたもそのために働くためにこれを修正することができると確信している）

マイ修正：

function iframe_offset(e){ 
var x=e.getBoundingClientRect().x 
    ,y=e.getBoundingClientRect().y 
    ,w=e.ownerDocument.defaultView 
    do{ 
     e = e.offsetParent 
     if(e == null){ 
      e = w.frameElement 
      w = w.parent 
      if(e){ 
       x += e.offsetLeft+e.scrollLeft 
       y += e.offsetTop+e.scrollTop 
      } 
     } 
    }while(e) 
    return {x:x,y:y} 
}