Html 在 iframe 上覆盖 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2094668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overlay div over iframe
提问by Peter Clark
I'm making a widget similar to the uservoice widgets, except I want the content of the page to be in an iFrame rather than the widget appear via javascript. How can I have a full page (width/height 100%) iFrame with a div fixed to the left of the browser, an example (using javascript rather than css/html) is here: http://uservoice.com/demo
我正在制作一个类似于 uservoice 小部件的小部件，除了我希望页面的内容在 iFrame 中，而不是小部件通过 javascript 出现。我怎样才能有一个完整的页面（宽度/高度 100%）iFrame，一个 div 固定在浏览器的左侧，一个例子（使用 javascript 而不是 css/html）在这里：http: //uservoice.com/demo
I want that widget to appear natively on the page, and the content be loaded via iFrame.
我希望该小部件本机显示在页面上，并通过 iFrame 加载内容。
Any ideas? I can't make the iFrame fill the entire page, and also have the appear on top. I've played with z-indexes to no luck. Code example:
有任何想法吗？我不能让 iFrame 填满整个页面，也不能让 iFrame 出现在顶部。我玩过 z-indexes 没有运气。代码示例：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#widget {
left: 0px;
position: absolute;
top: 50%;
display: block;
z-index:100001;
width: 25px;
}
#content {
z-index:1;
}
</style>
</head>
<body>
<div id="widget">
widget
</div>
<iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe>
</body>
</html>
回答by Stephen Binns
If you're not loading cross domain then you could just load in using jquery ajax call http://docs.jquery.com/Ajax/load
如果您没有加载跨域，那么您可以使用 jquery ajax 调用http://docs.jquery.com/Ajax/load加载
$(document).ready(function () {
$("#content").load("page.html");
});
and replace your iframe with
并将您的 iframe 替换为
<div id="content"></div>
回答by brianary
That's "clickHymaning", isn't it?
那就是“点击劫持”，不是吗？
Nothing is likely to work long term, as browsers (rightly) see this as a security threat to be prevented.
没有什么是可能长期有效的，因为浏览器（正确地）将此视为需要预防的安全威胁。
回答by Joshua
You probably need to add margin:auto; to your iFrame or the floating div. This will make it fill the screen 100%.
您可能需要添加 margin:auto; 到您的 iFrame 或浮动 div。这将使其 100% 填满屏幕。
Example:
例子：
.width {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
width:250px;
height:150px;
margin:auto;
}
To fix it to the left of the browser you can use:
要将其修复到浏览器的左侧，您可以使用：
margin:auto auto auto 0;
Good luck!
祝你好运！
回答by Tinus de Beer
with this code I get a double scrollbar on the right on the right. One for the website and one for the i-frame.
使用此代码，我在右侧右侧得到一个双滚动条。一个用于网站，一个用于 i-frame。
<style>
iframe {
position: absolute;
border: none;
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<div>
<iframe src="http://..."> </iframe>
</div>
回答by wilwaldon
You could wrap your iframe in a div with a low Z-index and then lay a div over it with a higher z-index.
您可以将 iframe 包装在 Z-index 较低的 div 中，然后在其上放置一个 z-index 较高的 div。
回答by miraculixx
This worked for me:
这对我有用：
- add the overlay div with a high z-index and absolute position
- make the iframe also positioned absolute
- add the iframe inside a div
- 添加具有高 z-index 和绝对位置的叠加 div
- 使 iframe 也定位为绝对
- 在 div 中添加 iframe
The div with the overlay:
带有叠加层的 div：
<div style="z-index:99;position:absolute;top:0;right:0">
...overlay html...
</div>
The iframe:
iframe：
<style>
iframe {
position: absolute;
border: none;
box-sizing: border-box;
width: 100%;
height: 100%;
}
</style>
<div>
<iframe src="http://..."> </iframe>
</div>
