HTML5学堂-码匠 HTML5学堂

您当前位于:AJAX数据交互 ——> iframe的基础知识,使用iframe知识实现Tab切换

iframe的基础知识,使用iframe知识实现Tab切换

2015/07/05 12:58:38 | 作者:HTML5学堂(码匠) | 分类:AJAX数据交互 | 关键词:iframe,Tab切换12312312

iframe基本知识及iframe版本Tab切换

HTML5学堂:本文当中,会依次为大家介绍iframe是什么,为何使用iframe;如何在当前网页中调用iframe中的标签和内容;如何在iframe中调用当前网页中的内容;检测iframe内容是否加载完成;利用iframe防止钓鱼;如何让iframe中加载的内容决定外层iframe的宽高。最后还会书写Tab切换的实例。

iframe是什么,为何使用iframe?

iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站的内容。示例:

  1. <body>
  2.     <div class='btn' >
  3.         <input id='btn' type="button" value='加载第1个html文件'/>
  4.         <input type="button" value='加载第2个html文件'/>
  5.     </div>
  6.     <iframe src='model1.html' class='con' id='frameBox'></iframe>
  7. </body>

如何在当前网页中调用iframe中的标签和内容?——contentWindow、contentDocument

直接看代码示例:

  1. <script>
  2.     var frameBox = document.getElementById('frameBox');
  3.     var btn = document.getElementById('btn');
  4.     btn.onclick = function(){
  5.         var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
  6.         console.log(frameTit[0].innerHTML);        
  7.     }
  8. </script>

注意由于JS有执行顺序问题,因此不要书写成如下样子:

  1. <script>
  2.     var frameBox = document.getElementById('frameBox');
  3.     var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');
  4.     console.log(frameTit[0].innerHTML);        
  5. </script>

另外,var frameTit = frameBox.contentWindow.document.getElementsByTagName('h1');等价于var frameTit = frameBox.contentDocument.getElementsByTagName('h1');但是,contentDocument不兼容IE6和7

如何在iframe中调用当前网页中的内容?——window.parent、window.top

window.parent.document.getElementsByTagName('div');

window.top.document.getElementsByTagName('div');

检测iframe的内容是否加载完成

  1. <script>
  2.     var newFrame = document.createElement('iframe');
  3.     newFrame.src = 'model1.html';
  4.     document.body.appendChild(newFrame);
  5.  
  6.     newFrame.onload = function(){
  7.         alert('已经加载完成iframe框架');
  8.     }
  9. </script>

需要注意:IE下的iframe的onload事件我们需要使用绑定的方式,不然不能够生效。也就是把onload的书写方式调整为attachEvent的书写方式:

  1. newFrame.attachEvent('onload', function(){
  2.     alert('已经加载完成iframe框架');
  3. });

防止别人使用自己的网站钓鱼

为被调用的iframe文件(自己的网站),添加如下代码:

  1. if (window!=window.top) {
  2.     window.top.location.href = window.location.href;
  3. };

欢迎沟通交流~HTML5学堂

利用iframe实现Tab切换

基本文件:iframe-tab.html model1.html model2.html model3.html

相关关系:iframe-tab.html中加载三个文件,model1到3分别是三个tab对应的内容

核心代码:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe-tab-HTML5学堂</title>
  6.     <style>
  7.         html,body,div,span,iframe{
  8.             margin: 0;
  9.             padding: 0;
  10.             font: "微软雅黑";
  11.         }
  12.         .tit{
  13.             width: 300px;
  14.             height: 40px;
  15.             text-align: center;
  16.         }
  17.         .tit span{
  18.             float: left;
  19.             width: 100px;
  20.             height: 40px;
  21.             line-height: 40px;
  22.             background: #cfc;
  23.             cursor: hand;
  24.             cursor: pointer;
  25.         }
  26.         .tit .select{
  27.             background: #9f9;
  28.         }
  29.         .con{
  30.             width: 300px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div class='tit' id="tabTit">
  36.         <span class='select'>标题1</span>
  37.         <span>标题2</span>
  38.         <span>标题3</span>
  39.     </div>
  40.     <iframe class='con' src="model1.html" frameborder="0" id="tabCon"></iframe>
  41. </body>
  42. <script>
  43.     var btns = document.getElementById('tabTit').getElementsByTagName('span');
  44.     var tabCon = document.getElementById('tabCon');
  45.     for (var i = 0; i < btns.length; i++) {
  46.         btns[i].index = i;
  47.         btns[i].onclick = function(){
  48.             for (var i = 0; i < btns.length; i++) {
  49.                 btns[i].className = '';
  50.             };
  51.             this.className = 'select';
  52.             tabCon.src = 'model'+(this.index+1)+'.html';
  53.             // 进行高度控制和处理
  54.             setTimeout(function(){
  55.                 tabCon.style.height = tabCon.contentWindow.document.body.offsetHeight+'px';
  56.                 console.log(tabCon.contentWindow.document.body.offsetHeight);
  57.             },100);
  58.         }
  59.     };
  60. </script>
  61. </html>

model1.html、model2.html、model3.html文件类似,在此只放置model2.html文件

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂</title>
  6.     <style>
  7.         html,body,div,h1,p{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         h1{
  12.             font-weight: normal;
  13.             font-size: 24px;
  14.         }
  15.         .con{
  16.             width: 300px;
  17.         }
  18.         .con h1{
  19.             height: 50px;
  20.             line-height: 50px;
  21.         }
  22.         .con p{
  23.             line-height: 30px;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class='con'>
  29.         <h1>内部书写的是模块2的标题</h1>
  30.         <p>HTML5学堂 http://www.h5course.com</p>
  31.     </div>
  32. </body>
  33. </html>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端