html中iframe标签的问题
1个回答
展开全部
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
