在iFrame jQuery中选择一个元素

Question

在我们的应用程序中，我们解析一个网页并将其加载到iFrame中的另一个页面中。加载页面中的所有元素都有其tokenid-s。我需要通过那些tokenid-s选择元素。意思是 - 我点击主页面上的一个元素，然后在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: accessing contents of an iframe

Answer 3

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

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

Answer 4

如果该案例是通过控制台访问iFrame，则e。 G。然后，您可以使用Chrome Dev Tools通过下拉菜单选择DOM请求的上下文（参见图片）。

Answer 5

这里有一个简单的JQuery来做这个只用于容器的div可拖动：

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