获取 iframe 中元素的 Y 位置

Question

我想这已经被问过了，我有一个 iframe 页面，我们有近 10 个文本字段，每当用户点击任何一个文本字段时，我都想知道该页面中的 Y 位置。 这可能吗？

Answer 1

这是未经测试的，但应该为您指明正确的方向。

jQuery

   $(document).ready(function(){
      var iframe = $('iframe');
      var inputs = iframe.find('input');

      $.each(inputs, function(){
        $(this).click(function(){
          console.log($(this).offset().top));
        })
      })
    })

原版 Javascript

根据评论更新。也未经测试。

为您的 iframe 提供一个 ID 以使其更易于定位，然后：

var iframe = document.getElementById('iframe');
var inputs = Array.prototype.slice.call(iframe.getElementsByTagName('input'));

inputs.forEach(function(input,i){
  input.addEventListener('click', function(){
    console.log(this.getBoundingClientRect().top;
  })
})

Answer 2

如果主窗口和 iframe 内容在同一个协议/域内，则可以直接访问 iframe 的 contentBody 并获取输入字段的 scrollTop 位置。

例如：

var y = $('iframe').contents().find('#myInputField').offset().top;