使用jQuery在iframe中选择元素

Question

在我们的应用程序中，我们解析一个网页并将其加载到另一个页面的iframe中。加载后的页面中的所有元素都有它们自己的令牌ID。我需要通过这些令牌ID选择元素。也就是说 - 我在主页面上点击一个元素，然后选择iframe中相应的元素。我使用jQuery以以下方式实现：

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

然而，使用此函数我只能选择当前页面中的元素，而不能选择 iFrame 中的元素。 有人能告诉我如何选择已加载的 iFrame 中的元素吗？

谢谢。

- cycero

---

如果有人需要从iframe访问父窗口的元素，请参见https://dev59.com/kmw05IYBdhLWcg3wykzn - yu yang Jian

Answer 1

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

请注意，如果此 iframe 的 src 指向不同的域名，则由于安全原因，您将无法在 JavaScript 中访问此 iframe 的内容。

- Darin Dimitrov

---

记住，$('iframe')不会直接返回iframe。你需要从数组中取出它。 - McKayla

感谢您愿意提供帮助。但是这似乎不起作用。 - cycero

@cycero，应该可以运行。您是动态生成这个 iframe 吗？不要忘记，如果您将此 iframe 的 src 元素指向与您不同的另一个域，由于安全原因，您无法访问其内容。 - Darin Dimitrov

当我通过控制台输入$('iframe')时，它可以工作，但在调试和正常执行时，$('iframe')什么也不返回... - Vitaly Zdanevich

哦，我找到问题了 - 我的脚本是从 iframe 中加载的，所以我可以使用常规的 iframe 选择器。 - Vitaly Zdanevich

Answer 2

请看这篇帖子：http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

将选择器放在find方法中。

但是，如果iframe不来自您的服务器，则可能无法实现。其他帖子讨论了权限被拒绝错误。

jQuery / JavaScript：访问iframe内容

- Kevin Bowersox

---

这个代码可以获取元素的HTML，但是如何给选中的元素添加CSS类呢？$("#iframeDiv").contents().find("[tokenid=" + token + "]").addClass("border"); 似乎不起作用。 - cycero

你是否收到任何权限被拒绝的错误？能否给我iframe的HTML代码？ - Kevin Bowersox

没有，没有权限被拒绝的问题。 - cycero

Answer 3

当你的文档准备好并不意味着你的 iframe 也准备好了，因此你应该侦听 iframe 的加载事件，然后访问你的内容：

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

- Fareed Alnamrouti

Answer 4

如果情况是通过控制台访问IFrame，例如Chrome Dev工具，那么您只需通过下拉菜单选择DOM请求的上下文即可（参见图片）。

- tibersky

Answer 5

这里有一个简单的 JQuery 代码，可以让 div 元素在容器内可拖动：

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );

- Rajasekharreddy Kadasani