HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前网页中的内容;检测iframe内容是否加载完成;利用iframe防止钓鱼;如何让iframe中加载的内容决定外层iframe的宽高。最后还会书写Tab切换的实例。
iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容。示例:
<body>
<div class='btn' >
<input id='btn' type="button" value='加载第1个html文件'/>
<input type="button" value='加载第2个html文件'/>
</div>
<iframe src='model1.html' class='con' id='frameBox'></iframe>
</body>
直接看代码示例:
<script>
var frameBox = document.getElementById('frameBox');
var btn = document.getElementById('btn');
btn.onclick = function(){
var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
console.log(frameTit[0].innerHTML);
}
</script>
注意由于JS有执行顺序问题,因此不要书写成如下样子:
<script>
var frameBox = document.getElementById('frameBox');
var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
console.log(frameTit[0].innerHTML);
</script>
另外,var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');等价于var frameTit = frameBox.contentDocument.getElementsByTagName('h1');但是,contentDocument不兼容IE6和7
window.parent.document.getElementsByTagName('div');
window.top.document.getElementsByTagName('div');
<script>
var newFrame = document.createElement('iframe');
newFrame.src = 'model1.html';
document.body.appendChild(newFrame);
newFrame.onload = function(){
alert('已经加载完成iframe框架');
}
</script>
需要注意:IE下的iframe的onload事件我们需要使用绑定的方式,不然不能够生效。也就是把onload的书写方式调整为attachEvent的书写方式:
newFrame.attachEvent('onload', function(){
alert('已经加载完成iframe框架');
});
为被调用的iframe文件(自己的网站),添加如下代码:
if (window!=window.top) {
window.top.location.href = window.location.href;
};
基本文件:iframe-tab.html model1.html model2.html model3.html
相关关系:iframe-tab.html中加载三个文件,model1到3分别是三个tab对应的内容
核心代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe-tab-HTML5学堂</title>
<style>
html,body,div,span,iframe{
margin: 0;
padding: 0;
font: "微软雅黑";
}
.tit{
width: 300px;
height: 40px;
text-align: center;
}
.tit span{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
background: #cfc;
cursor: hand;
cursor: pointer;
}
.tit .select{
background: #9f9;
}
.con{
width: 300px;
}
</style>
</head>
<body>
<div class='tit' id="tabTit">
<span class='select'>标题1</span>
<span>标题2</span>
<span>标题3</span>
</div>
<iframe class='con' src="model1.html" frameborder="0" id="tabCon"></iframe>
</body>
<script>
var btns = document.getElementById('tabTit').getElementsByTagName('span');
var tabCon = document.getElementById('tabCon');
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function(){
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
};
this.className = 'select';
tabCon.src = 'model'+(this.index+1)+'.html';
// 进行高度控制和处理
setTimeout(function(){
tabCon.style.height = tabCon.contentWindow.document.body.offsetHeight+'px';
console.log(tabCon.contentWindow.document.body.offsetHeight);
},100);
}
};
</script>
</html>
model1.html、model2.html、model3.html文件类似,在此只放置model2.html文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学堂</title>
<style>
html,body,div,h1,p{
margin: 0;
padding: 0;
}
h1{
font-weight: normal;
font-size: 24px;
}
.con{
width: 300px;
}
.con h1{
height: 50px;
line-height: 50px;
}
.con p{
line-height: 30px;
}
</style>
</head>
<body>
<div class='con'>
<h1>内部书写的是模块2的标题</h1>
<p>HTML5学堂 http://www.h5course.com</p>
</div>
</body>
</html>