首页 > 代码库 > iframe详细的使用
iframe详细的使用
谷歌火狐和ie是有区别的
谷歌需要服务器，为了更安全 获取内容的时候， 正常渲染没问题
获取内容
var oIframe = document.getElementById(‘iframe‘);
oIframe.contentWindow 获取到所有的内容节点
注：谷歌下会报错 需要服务器下
oIframe.contentWindow.document.getElementById(‘div‘) 获取到页面下的某个id为div的元素
oIframe.contentWindow.document.getElementById(‘div‘).style.color=‘red‘ 改变他的字体颜色
所有浏览器都支持
操控document
oIframe.contentDocument.getElementById(‘div‘) 可以直接获取到document下的元素
注：ie6,7 不支持 。 所以在ie6,7 下需要获取window再操纵Document
另一种情况 就是 三成嵌套
利用最里面的iframe 控制最外层的父级 window.top
例如：
iframe.html
<body>
<iframe src="http://www.mamicode.com/iframe1.html"></iframe>
</body>
iframe3.html
<body>
aa
<iframe src="http://www.mamicode.com/iframe.html"></iframe>
</body>
iframe1.html
<body>
<input type="button" value="http://www.mamicode.com/变红" id="btn" />
</body>
//点击按钮使iframe3的aa变红
var oBtn = document.getElementById(‘btn‘);
oBtn.onclick=function(){
window.top.getElementsByTagName(‘body‘)[0].style.color="red";
};
onload 事件 oIframe 有 onl oad 事件
oIframe.onload=function(){ alert(1) } //chrome,ff
oIframe.attachEvent(‘onload‘,function(){ alert(1) }) //ie 现在ie不需要事件绑定就可
防止自己的网站被别人利用 被钓鱼 —— 做一下处理
在自己的网站加js
if(window!=window.top){
window.top.location.href = http://www.mamicode.com/window.location.href;
}
这样在连接自己网站的时候会直接跳到自己的网页
实例：
window.onload=function(){
var oIframe = document.createElement(‘iframe‘);
oIframe.src = http://www.mamicode.com/‘iframe7.html‘;
document.getElementsByTagName(‘body‘)[0].appendChild(oIframe);
function changeHeight(){
setTimeout(function(){
oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
},500);
}
//根据连接文件的高度动态改变iframe的高度
var oBtn = document.getElementById(‘btn‘);
oBtn.onclick =function(){
oIframe.src = http://www.mamicode.com/‘iframe8.html‘;
changeHeight();
}
var oBtn1 = document.getElementById(‘btn1‘);
oBtn1.onclick =function(){
oIframe.src = http://www.mamicode.com/‘iframe7.html‘;
changeHeight();
}
changeHeight();
}
iframe详细的使用