关于修改iframe中css的方法

关于修改iframe中css的方法

项目中，遇到需要修改iframe的css。在网上进行查找，找到了常见的方法，但是对于动态修改iframe中的src则没有提及到，现在在这里进行总结。

注意：这里涉及的是同源网站的调整，跨域问题请另行百度。

一、获得iframe的document

contentWindow 属性能够以HTML对象来返回iframe中的文档

可以通过所有标准的DOM方法来处理被返回的对象。

frameObject/iframeObject.contentWindow

二、 修改iframe的css

1、iframe中已经有指定src

<div id="myDiv">
	<iframe id="myFrame" src="demo_iframe.html"></frame>
</div>

假设我们有这样的一个结构，我们如何改变iframe原本就有css呢？

function changeStyle(elementID) {
	var iframeWindow = document.getElementById("myFrame").contentWindow;    // 返回iframe中的window对象，console.log()可以看到所有的属性
	var iframeDocument = iframeWindow.document;     // 返回HEMLDocument对象，可以使用DOM方法进行操作
	// 修改iframe中的某个指定元素
	var element = iframeDocument.getElementById(elementID);
    console.log(element.style.padding);
    element.style.padding = "50px";
    console.log(element.style.padding);
    // 修改iframe的body
    var iframeBody = iframeDocument.body;
    console.log(iframeBody.style.padding);
    iframeBody.style.padding = "0px";
    console.log(iframeBody.style.padding);
}
changeStyle("htmlwidget_container");

处理结果如下：

2、iframe动态修改src

由于iframe的资源是异步加载的，所以我们需要通过.load()函数进行修改。

function changeStyle() {
	$("myFrame").attr("src", "demo_iframe.html");
	$("#myFrame").load(function() {
		alert("OK");		// 当myFrame加载完才执行此处代码
		// 此处代码与上面一致
	}
}