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

Question

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

私はoffsetTopとoffsetParentを使ってみましたが、これはインナーページのボディタグまでしか繰り返されませんでした。

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を呼び出すと、上部と左側を取得できます。iFrameのID'my_iframe'が親ドキュメントにあるとします。

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

ただし、これは、iFrameのコンテンツが同じオリジン（同じホスト、ポート、プロトコル）に属している場合にのみ機能します。

編集：bytes.comでも同様の質問が見つかりました：iframeの相対的なマウスの位置

Answer 3

Yuriy ソリューションは、要素が 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}
}