使用 jQuery 在 iframe 中选择一个元素答案

【问题标题】：Selecting an element in iframe with jQuery使用 jQuery 在 iframe 中选择一个元素
【发布时间】：2011-09-13 02:30:01
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

请记住 $('iframe') 不会直接返回 iframe。你需要把它从数组中拉出来。
感谢您的帮助。但这似乎不起作用。
@cycero，它应该可以工作。你是动态生成这个 iframe 吗？不要忘记，如果您将此 iframe 的 src 元素指向另一个域，而不是出于安全原因，您将无法访问其内容。
我不是从其他域加载它，而是从同一个文件夹加载它。 iFrame 内容正在动态生成并作为文件存储在服务器上。然后将该文件加载到 iFrame 中。
@cycero，我已经更新了我的答案。尝试传递iframe.contents()

【解决方案2】：

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

将选择器放在 find 方法中。

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

【讨论】：

这在获取元素的 HTML 方面是有效的，但是如何向该选定元素添加 CSS 类？ $("#iframeDiv").contents().find("[tokenid=" + token + "]").addClass("border");好像没用。
您是否收到任何权限被拒绝错误？可以给我 iframe 的 html 吗？
不，没有权限被拒绝的问题。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果案例是通过控制台访问 IFrame，例如。 G。 Chrome Dev Tools 然后你可以通过下拉菜单选择 DOM 请求的上下文（见图）。

【讨论】：

【解决方案5】：

这里有一个简单的 JQuery 来做到这一点，使 div 只能在容器中拖动：

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

【讨论】：