親ウィンドウ上からiframe divの距離を特定する

Question

iframe内にdivがあります（両方のドキュメントが同じアプリケーション/ドメインのものであるため、元のポリシーに問題はありません）。私は親ウィンドウの上からdivの距離を把握する必要があります。 iframeにもスクロールバーがあるので、これも考慮する必要があります。

クロスオリジンポリシー（iframe.contentWindowは使用できません）のため半製品jsfiddleを作成できませんが、ここでは動作していません fiddleです。

私はフィドルに埋め込まれIFRAMEを持っている：

<iframe src="https://noc2spam.github.io/embed.html?ddd" style="display:block; border:0; width:300px; height:200px; overflow:scroll"></iframe> 

次のスクリーンショットはあなたに私がまさに必要なもののアイデアを与えるかもしれません。

私はすでにのiframeのための作業をいないようだ答えのいくつかを試してみました。たとえば、thisは機能しません。これを行う最も便利な方法は何ですか？

Answer 1

iframeに含まれるdivの上からオフセットを取得するには、IFRAME内のDIVオフセットをmainWindow内のIFRAMEのオフセットにSUMする必要があります。 （IFRAMEとメインウィンドウの間とのpostMessage）のjQueryでそれを行うには ：

/** 
 
supposed: 
 
#example-iframe = id of iframe 
 
#example-div = id of DIV inside the iframe 
 
*/ 
 
/** main.html -- top page */ 
 
$("#example-iframe")[0].contentWindow.postMessage({ 
 
    cmd:"getDivDistance" 
 
}); 
 
window.onmessage = function(e){ 
 
    var msg = JSON.parse(e.data) 
 
    switch(msg.cmd){ 
 
     case "setDivDistance": 
 
     var frametop = $("#example-iframe").offset().top 
 
     var totaltop = frametop + msg.top; 
 
     alert("MY TOP IS "+totaltop); 
 
     break; 
 
    } 
 
}; 
 

 

 
/** frame.html -- iframe page*/ 
 
window.onmessage = function(e){ 
 
    var msg = JSON.parse(e.data) 
 
    switch(msg.cmd){ 
 
     case "getDivDistance": 
 
     window.top.postMessage({ 
 
      cmd:"setDivDistance", 
 
      top:$("#example-div").offest().top 
 
     }); 
 
     break; 
 
    } 
 
}