使用 jQuery 选择 iframe 中的元素

Question

在我们的应用程序中，我们解析网页并将其加载到 iframe 中的另一个页面中。该加载页面中的所有元素都有其令牌 ID。我需要通过这些令牌 ID 选择元素。意思是 - 我点击主页上的一个元素，然后在 iframe 的页面中选择相应的元素。在 jQuery 的帮助下，我按照以下方式执行此操作：

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

但是，使用此函数，我只能选择当前页面中的元素，而不能选择 iFrame 中的元素。谁能告诉我如何选择加载的 iFrame 中的元素？

谢谢。

Answer 1

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

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

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 的内容

Answer 3

当您的文档准备就绪时，并不意味着您的 iframe 也已准备就绪，
所以你应该监听 iframe 加载事件然后访问你的内容：

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

Answer 4

如果情况是通过控制台访问 IFrame，例如 Chrome 开发工具，那么您只需通过下拉列表选择 DOM 请求的上下文（见图）。

Answer 5

这是简单的 JQuery 来执行此操作，使 div 仅可在容器中拖动：

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