jQuery 和 iframe 以及奇怪的定位：有解决方法吗？答案

【问题标题】：jQuery and iframes and weird positioning: is there a workaround?jQuery 和 iframe 以及奇怪的定位：有解决方法吗？
【发布时间】：2011-05-28 09:05:11
【问题描述】：

我在 iframe 外部有一个可拖动的东西，在其中有一个可放置的目标。在这里，我将 iframe 显示为包含由其 src 属性加载的 HTML 的 sn-p。

<div id="draggables">
  <img src="drag-me.gif">
</div>

<iframe src="iframe-src.html" id="iframe">
  <!-- HTML gubbins -->

  <div id="droppable">&nbsp;</div>

  <!-- More HTML gubbins -->
</iframe>

我使用一些 jQuery（UI 可拖动/可拖放）来做事：

$("#iframe").load(function() {
    var $this = $(this);
    var contents = $this.contents();

    contents.find('#droppable').droppable({
        drop: function (event, ui) { alert('dropped'); }
    });
    $('#draggables img').draggable();
});

draggable 变为可拖动并且 droppable 成功成为放置目标。问题是放置区域的着陆区不在屏幕上显示的位置。也就是说，当可拖动对象被拖放到拖放目标上方的某个位置时会触发警报，而不是在目标本身上。

我所做的一些测试表明，目标在屏幕上的位置与 jQuery 认为的位置之间的差异与页面上 iframe 的垂直位置有关，但我找不到直接的相关性。有谁知道这个问题是否已经被任何人调查过并且很可能已经解决了？

如果做不到这一点，谁能建议一种方法，我可以在不使用 iframe 且两个页面的结构和样式不会相互干扰的情况下将外部 HTML 文件加载到我的页面中？我正在考虑直接加载内页并使用 javascript 在其周围绘制页面控件。

TIA 奥特鲁斯

【问题讨论】：

我也面临同样的问题！！让我知道你是否成功
找到这个搜索stackoverflow.com/questions/36368327/… 的答案看起来偏移量可能是关键，但通过下面的 GIST 没有看到滚动部分的更新。
经过一些试验和错误后，我的古怪解决方案就在这里：stackoverflow.com/a/52317620/3175487 它足以满足我的需要，但它并不是真正解决问题的方法 :-)

标签： jquery jquery-ui iframe jquery-ui-draggable

【解决方案1】：

您正在尝试从子 iframe 中访问父元素。我没有亲自测试过，但尝试为您的 jquery 选择器设置上下文。否则，它只会在当前 iFrame 内查看。

$('#draggables img', parent).draggable();

【讨论】：

问题进入三年，但以防万一，这似乎对我有用：$('#draggables img', window.top.document)

【解决方案2】：

很久以前就有人问过，但是挖掘了所以我发现了一个 GIST，人们通过覆盖 $.ui.ddmanager.prepareOffsets 的默认行为解决了这个问题。

您可以在此处找到工作代码： https://gist.github.com/gujiman/581a3cee1dbf4beafccb

【讨论】：