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"> </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