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

Question

我有一个 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。

提前致谢。

Answer 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 部分编辑了它。下一次可能会搜索更多，因为答案总是在那里！

Answer 2

你不能这样做。

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

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

Answer 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。