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

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

iframe是什么,为何使用iframe?

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>

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

直接看代码示例:

<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

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

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

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

<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切换

基本文件: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>

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

富文本编辑器的一些要点

重新复习了富文本编辑器的基本实现,现总结下要点:   1,iframe的创建,之所以使用iframe框架,是为了防止编辑的内容影响当前文档。   2,隐藏的te...

36412
来自专栏用户画像

3.4.4 多帧滑动窗口与选择重传协议(SR)

为了进一步提高信道的利用率,可设法只重传出现差错的数据帧或者是计数器超时的数据帧。但此时必须加大接受窗口,以便先收下发送序号不连续但仍处在接受窗口中的那些数据帧...

742
来自专栏java相关

Shell脚本编程

linux中的变量分为环境变量和普通变量,其中环境变量可以理解为全局变量,在所有shell的子程序中都可以引用,普通变量只能在自己的shell程序中使用,程序结...

1012
来自专栏安恒网络空间安全讲武堂

​CTF逆向——常规逆向篇(下)

CTF逆向——常规逆向篇(下) 题目: CrackMe.exe(NSCTF reverse第一题) WHCTF2017 reverse HCTF reverse...

2345
来自专栏LeoXu的博客

[翻译]Ext JS 教程-布局和容器 原

布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。

471
来自专栏mySoul

微信小程序自定义组件

其中,components为组件目录,nodemodules为模块目录,pages为小程序的页面目录,utils为一些基础功能的封装。好比安装的第三方百度统计功...

1233
来自专栏aCloudDeveloper

string 之 memcpy函数 和 memset函数

Author: bakari  Date: 2012/8/9 继上篇。。。。。 下面是我写的代码与源码作的一些比较,均已严格测试通过,分别以“string 之”...

1847
来自专栏柠檬先生

Extjs form 组件

1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关...

1835
来自专栏开发与安全

Perl 工作积累(不定期更新)

学会用 perl -c 检查语法, perl -e 直接执行语句, perldoc 查看文档 , CPAN 查找 module ... # 注释; =pod ...

1780
来自专栏HTML5学堂

JavaScript 基础语法

讲法声明 - 很重要,请先查看 关于JavaScript的讲法,我们采取的方式与HTML&CSS类似,先在课程中带大家,以“实现页面小功能”为目的,一步一步的进...

2894

扫码关注云+社区