1

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

提前致谢。

4

3 回答 3

2

不幸的是，不可能做到这一点跨域。我试图以多种方式操纵它，但都失败了。如果您有一个愿意使用用户脚本的社区，那可能是一个选择。如果没有，你所问的就是不可能的。

用户脚本

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

这是有关用户脚本的信息：单击。如本指南所示： 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"});
    }
});

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

于 2012-10-17T06:28:14.147 回答
1

你不能这样做。

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

您的代码在框架文档中运行，该文档位于不同的域中，因此同源策略会阻止您访问父文档来修改它。

于 2012-10-17T06:37:26.403 回答
0

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

您可以使用 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。

于 2012-10-17T06:33:45.620 回答