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

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

<强> Userscripts

用户脚本是javascript中的脚本（可能是随附的任何库）。用户可以选择在浏览器中安装一个。虽然FireFox需要一个名为Greasemonkey的扩展，但FireFox和Opera完全支持它。 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。

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

3 个答案: