在 iframe 父级中访问 div

Posted 2023-05-09

【中文标题】在 iframe 父级中访问 div

【英文标题】：access div in iframe parent

【发布时间】：2021-09-21 04:51:42

【问题描述】：

我有一个包含 iframe 到另一个页面的页面，我正在寻找的是单击 iframe 内的某些内容，然后可以访问或更具体地隐藏父级中的 div。我知道一些 JQuery，但由于某种原因，当我尝试自己编写它时，我只是茫然地坐在代码编辑器中

【问题讨论】：

页面和 iframe 是否托管在同一个子域上？

是的，如果代码需要进入，我可以访问这两个页面

@Andrew Morris 代码访问不是问题——但浏览器不允许跨不同域的 javascript 操作。并且这些域必须完全匹配（即使协议必须相同——你不能从 http 站点通过 JS 处理 https 站点）

@feeela，我阅读了相同的域策略，我知道页面不会受此限制，我只是忘了在问题中提及它。不过还是谢谢

【参考方案1】：

在 iframe 中试试这个：

$('#DIVtobehidden', window.parent.document).hide();

【讨论】：

如果父级在不同的域上，这会起作用吗？

这个答案帮助我解决了我遇到的类似问题，为旧的第 3 方 Web 应用程序添加了自定义增强功能 - 但它不是完整的解决方案。在我的情况下，我需要在父框架中的元素上调用 .trigger('someevent') ，但它不起作用 - JQuery 数据结构中似乎没有事件处理程序。相反，我不得不求助于看起来相当 hacky 的构造：window.parent.$("myselector").trigger("someevent") 尽管很丑，但至少有工作的好处！

【参考方案2】：

$("#element-In-Iframe").on('click', function() 
    $('#element-in-parent-window', window.parent.document).hide();
);

FIDDLE

【讨论】：

@CrystalMiller - 它曾经在三年前工作，请注意它也与接受的答案完全相同。这些天 JSFiddle 正在从一个 shell 子域运行它自己的 iframe，所以同源策略开始了。

【参考方案3】：

如果两个页面都在同一个（子）域上，您应该能够通过以下方式访问父窗口：

window.parent.document.getElementById('divId')

好吧，这没有 jQuery，但应该可以工作