IFRAME是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
frameset和frame标签必须在一起使用。frame有一个重要的值是target，它表示在指定的框架中打开网页；target可以配置四个参数：
1、blank：它表示在一个新的窗口中打开链接网页，
2、top：它表示在本窗口中打开链接网页，
3、parent：在上一层的框架中打开链接网页，
4、self：在超链接中打开链接网页。
扩展资料
特点如下：
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4、通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
参考资料来源：百度百科-iframe
index.html 和 iframe.html 必须同域且使用http协议
整个页面 index.html
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.stage{
margin:auto 50px
}
.dropDownPanel{
position:fixed
width:200px
height:200px
background-color:green
}
iframe{
display:block
width:100%
height:200px
border:1px solid
margin-top:20px
}
</style>
<script>
window.$showDropDown = function(top,left){
var dropDownPanel = window.$dropDownPanel
if(!dropDownPanel){
dropDownPanel = document.createElement('div')
document.body.appendChild(dropDownPanel)
dropDownPanel.className = 'dropDownPanel'
dropDownPanel.addEventListener('click',function(e){
e.stopPropagation()
})
document.addEventListener('click',function(){
window.$hideDropDown()
})
}
dropDownPanel.style.top = top + 'px'
dropDownPanel.style.left = left + 'px'
dropDownPanel.style.display = 'block'
window.$dropDownPanel = window.$dropDownPanel || dropDownPanel
}
window.$hideDropDown = function(){
window.$dropDownPanel && (window.$dropDownPanel.style.display = 'none')
}
window.$getOffset = function(el){
var offset = { top:el.offsetTop,left:el.offsetLeft,height:el.offsetHeight,width:el.offsetWidth }
var parent = el.offsetParent
while(parent){
offset.top += parent.offsetTop
offset.left += parent.offsetLeft
parent = parent.offsetParent
}
return offset
}
window.$bindDropDownHandler = function(iframe){
iframe.contentWindow.$iframeOffset = window.$getOffset(iframe)
iframe.contentWindow.document.addEventListener('click',function(){
window.$hideDropDown()
})
}
</script>
</head>
<body>
<div class="stage">
<iframe src="iframe.html" frameborder="0" onload="window.$bindDropDownHandler(this)"></iframe>
<iframe src="iframe.html" frameborder="0" onload="window.$bindDropDownHandler(this)"></iframe>
</div>
</body>
</html>
iframe页面 iframe.html
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html{
width:100%
height:200px
background-color:gray
}
button{
position:fixed
bottom:20px
left:50px
}
</style>
<script>
window.addEventListener('load',function(){
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.stopPropagation()
var offset = window.top.$getOffset(this)
window.top.$showDropDown(
offset.height + offset.top + window.$iframeOffset.top,
offset.left + window.$iframeOffset.left
)
})
})
</script>
</head>
<body>
<button>showdropdown</button>
</body>
</html>
