操作iframe

Iframe用来在页面中插入其它页面

操作页面中的iframe页面的元素：（父操作子页面）

window.onload = function(){

var oInput = document.getElementById('input1');

var oIframe = document.getElementById('iframe1');

oInput.onclick = function(){

//oIframe.contentWindow.document.getElementById('div1').style.color = 'red';  //所有浏览器都是支持的

oIframe.contentDocument.getElementById('div1').style.background = 'red';   //ie6 ie7是不支持的

};

};

 

 

操作iframe页面的上级页面的元素：（子操作父页面）

window.onload = function(){

var oInput = document.getElementById('input1');

oInput.onclick = function(){

//window.parent.document.getElementById('div1').style.color = 'red';

 

window.top.document.getElementById('div1').style.color = 'red';最顶级的页面

};

};

 

 

 

Iframe自带的onload事件：

window.onload = function(){

var oIframe = document.createElement('iframe');

oIframe.src = 'iframe1.html';

document.body.appendChild(oIframe);

/*oIframe.onload = function(){

alert(123);

};*/

//ie 下的iframe的onload事件只能用绑定的形式

oIframe.attachEvent('onload',function(){

alert(123);

});

};

 

 

attachEvent：

用于HTML内代码层和UI层分离。
比如，你要给一个按钮增加一个单击事件，你会怎么做？
<input type="button" id="theBtn" value="点击" onclick="alert('点击了一下');" />
明显的，它破坏了标签，如果下次要修改这个按钮不小心就会丢失。
attachEvent是为了将事件分离，如：

<input type="button" id="theBtn" value="点击" />
var theBtn = document.getElementById("theBtn"); //取得ID为theBtn的按钮
theBtn.attachEvent("onclick", buttonClicked); //给按钮增加事件
function buttonClicked(e){ alert("点击了一下"); } //定义函数

attachEvent用法：
attachEvent(事件类型, 处理函数);
P.S.:在Firefox中，对应的函数是addEventListener(事件类型, 处理函数, 使用捕获);
在简单的HTML应用中可能用不用效果不明显，但是在复杂的HTML客户端JS代码内，优势就体现出来了。）

 

利用iframe的钓鱼网站：将真正的网站作为页面iframe嵌入。

防止：

在页面中加入：

<script>

If(window!=window.top)

{

Window.top.location.href=window.location.href; location.href 属性返回当前页面的 URL。

}

</script>就是判断当前页面是不是顶层页面

 

改变iframe的大小：