iframe操作笔记
iframe元素属性介绍：
align ： left | right | top | middle | bottom
frameborder ： 0 | 1 规定显示框架周围的边框
width， height 定义iframe的宽度和高度
marginWidth， marginHeight 定义iframe的边距
scrolling ： yes | no | auto 是否显示滚动条
src : 规定iframe中显示文档的url
longdesc ： 规定一个页面，该页面包含了有关 iframe 的较长描述
javascript操作iframe中的元素
可以使用oIframe.contentWindow来获取iframe下的window对象
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//获取iframe
varoIframe=document.getElementsByTagName('iframe')[0];
//获取iframe中的元素
varoText=oIframe.contentWindow.document.getElementById('text');
//改变iframe中元素的属性
oIframe.contentWindow.document.getElementById('text').style.color='red';
//需要注意，如果采用局部变量缓存节点再操作会报错，如下
oText.style.color='red';
|
需要注意的是此方法在chrome浏览器下需要在服务器环境下方可生效，其他浏览器均支持此方法
获取iframe下的document对象可以使用oIframe.contentDocument方法，但是在IE6， 7下不支持此方法
如何在iframe中操作iframe外面的元素呢？
可以通过window.parent来获取iframe父级的window对象
|
1
2
3
4
5
6
7
|
//获取iframe父级下的元素
varoText=window.parent.document.getElementById('text');
//如果是iframe多层嵌套，可以使用window.top来获取最外层的window对象，如
varoText=window.top.document.getElementById('text');
//需要注意此方法在chrome下需要服务器环境方可生效
|
iframe下的onload事件
iframe加载完成后有一个onload事件，如
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
varoIframe=document.createElement('iframe');
oIframe.src='http://www.rankbill.com';
document.body.appendChild(oIframe);
oIframe.onload=function(){
console.log('OK');
}
//在IE下iframe的onload事件只能用绑定形式添加
oIframe.attachEvent('onload',function(){
console.log('IE OK');
});
|
如何防止网站被钓鱼
有很多不法分子利用iframe来嵌套网站欺骗用户，那如何防止网站被不法分子利用呢？
|
1
2
3
4
|
//防止网站被钓鱼，加个判断即可
if(window!=window.top){
window.top.location.href=window.location.href;
}
|
