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>