如何使用 jquery 从 IFrame 本身更改 IFrame 样式？

Posted 2023-05-09

【中文标题】如何使用 jquery 从 IFrame 本身更改 IFrame 样式？

【英文标题】：How to change IFrame styles from IFrame itself using jquery?

【发布时间】：2012-10-07 08:18:37

【问题描述】：

我有一个 iframe，它将使用以下脚本动态插入父页面（我无法控制此域）...

var _hf_iFrame = document.createElement("iframe");
_hf_iFrame.setAttribute("id", "_hf_iFrame");
_hf_iFrame.setAttribute("name", "_hf_iFrame");
_hf_iFrame.setAttribute("style", "height: 354px; width: 445px; border: 0; margin-left: -400px; top: 23%; position: fixed;");
document.body.appendChild(_hf_iFrame);
_hf_iFrame.setAttribute("src", "http://anotherdomain.com/frame.html");

我想从 iframe 本身更改 iframe 的 css 属性。 有可能实现这一目标吗？我在 iframe 中使用 JQuery。

提前致谢。

【问题讨论】：

你能在上面的脚本中添加额外的代码吗？

【参考方案1】：

很遗憾，无法跨域进行此操作。我试图以多种方式操纵它，但都失败了。如果您有一个愿意使用用户脚本的社区，那可能是一个选择。如果没有，你的要求是不可能的。

用户脚本

用户脚本是 javascript 中的脚本（也可能是它附带的任何库）。用户可以选择在浏览器中安装一个。 FireFox 和 Opera 完全支持它，尽管 FireFox 需要一个名为 Greasemonkey 的扩展。 Chrome 有一个小例外：如果库在页面上不活动，您需要将库和代码添加到文档本身。如果是，您可以像使用任何其他浏览器一样使用它。我不确定 Safari 和 IE 根本不支持它。

这里是关于用户脚本的信息：Click。如本指南所示： Safari 支持附加组件，IE 也支持，但它没有说明 IE 9/10。要查看随机用户脚本的想法，请转至 userscripts.org。

当域相同时，见下文。

旧答案

可以从 iFrame 中访问***文档。这是纯javascript。由于 iFrame 是动态创建的，因此一页上可能会有更多内容。这个脚本也得到了正确的框架：

var arrFrames = parent.document.getElementsByTagName("iframe");
for (var i = 0; i < arrFrames.length; i++) 
    if (arrFrames[i].contentWindow === window) alert("yay!");
    
        arrFrames[i].contentWindow.style.border = "1px solid lime";
    

在 jQuery 中：

parent.$("iframe").each(function(iel, el) 
    if(el.contentWindow === window)
    
        $(this).css("border" : "1px solid lime");
    
);

这不是我的代码。这个原件是在here 找到的，我刚刚为 CSS 部分编辑了它。下一次可能会搜索更多，因为答案总是在那里！

【讨论】：

我尝试了相同的方法，但是您的两个 jquery 代码都抛出“访问属性 '$' 的权限被拒绝”和 javascript 代码抛出“访问属性'文档'的权限被拒绝”。这两个文档位于不同的域中，我正在 Firefox 16.0.1 上进行测试

在这种情况下是同源异常。你不能做这个跨域。恐怕我读错了你的问题。我会更新我的答案。

感谢您的更新，很抱歉，“用户脚本”是什么意思？

@LibinTK 我再次更新了我的答案，因为它太大而无法发表评论。

【参考方案2】：

你不能这样做。

您有两个文件。父母和被诬陷。 iframe 元素存在于父元素中，因此要修改它，您需要修改父文档。

您的代码在不同域中的框架文档中运行，因此same origin policy 会阻止您访问父文档来修改它。

【讨论】：

感谢您的澄清，但是否有任何解决方法或破解？

由于您无法控制父文档运行所在的域 - 没有。

也许我错过了什么。他想改变框架本身，而不是父母？是的，如果他确实可以访问框架的父级，则无法更改框架的父级，否则可以。

@gotqn — 他想修改 iframe 中加载的文档中的 <iframe> 元素。 <iframe> 元素是父文档的一部分。

我不想修改<iframe> 加载在<iframe> 中的元素；我要做的是更改<iframe> 本身，它是父窗口的子窗口。请看我的问题，实际上我想更改margin-left 属性。

【参考方案3】：

如果我对您的理解正确，您想在框架中发生某些事情时更改框架的样式。

您可以使用 jQuery 选择器和 .on 函数将函数绑定到框架中的每个元素：

$('#myFrame).contents().find('myButton').on('click',function()
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
);

注意，如果您正在执行此代码，则在加载框架之前，您应该使用以下绑定技术：

$('#myFrame).contents().find('myButton').on('click','#myFrame',function()
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
);

它将绑定元素未渲染的事件事件。无论如何，我想在帧加载事件上绑定事件。

以上要求在您的文档中加载 jQuery。

【讨论】：

我想做的是改变 iframe 本身的样式；类似于 $('#myFrame).attr('style','background-color:red');

不，这会给你框架本身。您应该使用 $('#myFrame).contents().find('body').attr(...) - 这将选择正文。 contents() 函数返回框架中的元素。