时间戳

首页 > 解决方案 > 如何通过数据属性在 iframe 内的元素上使用 insertBefore

javascript - 如何通过数据属性在 iframe 内的元素上使用 insertBefore

问题描述

我的页面中有一个 iframe，我想通过选择带有“数据属性”的目标来移动一个元素，所以我尝试这样做：

var ifr=frames['myiframeID'].document;
var element='#idofdiv';
var destination='value_for_my_attribute';

我以这种方式尝试

$(element,ifr).insertBefore('[data-my-attribute="'+destination+'"]');

并以这种方式

$(element,ifr).insertBefore('[data-my-attribute="'+destination+'"]', ifr);

两种方式都失败了，什么也没有发生。

我做错了什么？

更新我检查这个： 

console.log('check',$(element,ifr), $('[data-my-attribute="'+destination+'"]', ifra));

两者都将返回对象。

标签： javascriptjquery

解决方案

注意：正如您所说，您确实满足同源策略，因此理论上您应该能够访问和操作从属 IFRAME DOM。

它不起作用的原因是选择器的工作方式。如果两个元素都应该位于与代码运行位置不同的框架内，则需要选择它们并提供其父框架。你的代码没有。只有被插入的元素被正确选择，但目标数据属性引用元素的选择器没有被正确选择。

$(element, ifr).insertBefore('[data-my-attribute="'+destination+'"]');
// ^ correct                 ^ incorrect

根据 jQuery 文档，您不能简单地将父元素添加到insertBefore函数调用中。

因此，这应该有效：

var el = $(element, ifr);
var ref = $('[data-my-attribute="'+destination+'"]', ifr);
el.insertBefore(ref);
// or
ref.before(el);

这应该按预期工作。

推荐阅读