iframe标签使用的一点小结.md

1.what is iframe ?

功能：iframe标签用于定义内联框架。

语法：

内联框架是在一个页面中嵌入另一个页面。

有很多网页看上去是一个网页，但实际上它其中可能镶嵌有其它网页，标签就可以把其它网页无缝地嵌入在一个页面中。

主要用于那些多个网页的共有部分，如导航栏、广告栏等。

HTML与XHTML之间的差异：无。

2.iframe 的一些属性

3.我的小demo,有需要的可以复制粘贴下,嘿嘿嘿

<style>
    #divide {
        height:100px;background-color: aqua;
    }
    #one,#two {
        cursor:pointer;
    }

</style>

<button id="one" style="background-color: red;float: left;">show one</button>
<button id="two" style="background-color: pink;float: right;">show two</button>

<div id="divide" style="display:block;clear: both;" ></div>
<div style="display:block;">
    <iframe align="left" id="remark-two" scrolling="no" src="http://fanyi.youdao.com/" frameborder="0"  width="100%" height="100%" >
    </iframe>
</div>

<div style="margin-left:40%;">
    <iframe id="remark-one" align="left" scrolling="no" src="https://tianqiapi.com/api.php?style=ya&skin=pitaya" frameborder="0" width="30%" height="30%" allowtransparency="true"></iframe>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>

    $('#remark-one').show();
    $('#remark-one').hide();
    $('#one').on('click',function(){
        $('#remark-one').show();
        $('#remark-two').hide();
    })

    $('#two').on('click',function(){
        $('#remark-two').show();
        $('#remark-one').hide();
    })
</script>