从父窗口顶部确定iframe div距离

Question

我在iframe中有一个div（原始策略没有问题，因为这两个文件来自同一个应用程序/域）。我需要弄清div与父窗口顶部的距离。 iframe也有滚动条，所以这也是要考虑的一件事。

由于交叉来源政策（iframe.contentWindow不可用），我无法生成半工作的jsfiddle，但无论如何这里都是非工作 fiddle。

我在小提琴中有一个嵌入式iframe：

function imp($c){
        $d= implode(',',$c);
        return $d;
    }


$b = imp($a);

print_r($b);

以下屏幕截图可能会让您了解我到底需要什么。

我已经尝试了一些似乎对iframe不起作用的答案。例如，this不起作用。这样做最方便的方法是什么？

Answer 1

为了从iframe中包含的div的顶部获得偏移量，您必须将IFRAME内的DIV偏移量与主窗口内的IFRAME的偏移量相加。 要在Jquery中执行此操作（以及iframe和MainWindow之间的postMessage）：

＆＃13;

＆＃13;

/**
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;
    }
}

＆＃13;

＆＃13;

＆＃13;