jQuery 和 iframe 以及奇怪的定位:有解决方法吗?

Posted

技术标签:

【中文标题】jQuery 和 iframe 以及奇怪的定位:有解决方法吗?【英文标题】:jQuery and iframes and weird positioning: is there a workaround? 【发布时间】: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 奥特鲁斯

【问题讨论】:

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

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

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

【讨论】:

问题进入三年,但以防万一,这似乎对我有用:$('#draggables img', window.top.document)【参考方案2】:

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

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

【讨论】:

以上是关于jQuery 和 iframe 以及奇怪的定位:有解决方法吗?的主要内容,如果未能解决你的问题,请参考以下文章

求助如何在javascript中通过iframe url定位iframe

IE 中 iFrame 上的 jQuery 问题

selenium之 定位以及切换frame(iframe)

selenium之 定位以及切换frame(iframe)

使用 iframe 上父文档中的 javascript(以及 jQuery 和其他库)和多个来源

Internet Explorer 和非常奇怪的 iFrame 行为案例