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

Posted 2023-05-09

【中文标题】使用 jQuery 在 iframe 中选择一个元素

【英文标题】：Selecting an element in iframe with jQuery

【发布时间】：2011-09-13 02:30:01

【问题描述】：

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

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

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

谢谢。

【问题讨论】：

如果有人需要从 iframe 访问父窗口的元素，请参阅***.com/questions/7027799/…

【参考方案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】：

看看这个帖子：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

【讨论】：

这在获取元素的 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 );