iframe 在页面中间加载，而不是页面顶部
[英]iframe loading in middle of page, instead of top of page
问题描述
I'm embedding wetransfer through iframe into a website, but the problem I have is when the page loads, it automatically jumps past the header section of the site, instead of having the new page load at the top of the page.
我通过 iframe 将 wetransfer 嵌入到网站中，但我遇到的问题是当页面加载时，它会自动跳过网站的标题部分，而不是在页面顶部加载新页面。
How can I stop this from happening?我怎样才能阻止这种情况发生？ I tried using jquery scrollto, but doesn't make any difference.我尝试使用 jquery scrollto，但没有任何区别。
https://jsfiddle.net/dbruning22/c0s6mhkv/1/ https://jsfiddle.net/dbruning22/c0s6mhkv/1/
HTML HTML
<header>
Some Header information and navigation
</header>
<body>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
CSS CSS
header {
background: green;
height: 600px;
}
7 个解决方案
解决方案1
0 2016-04-21 09:08:13
header height is 600px so iframe is placed right behind.标题高度为 600 像素，因此 iframe 位于正后方。
If you want iframe to cover the page from the top you should set如果你想让 iframe 从顶部覆盖页面，你应该设置
iframe{
position: absolute;
top: 0;
left: 0;
}
If you want to place iframe right behind header, just remove如果您想将 iframe 放在标题后面，只需删除
height: 600px;
解决方案2
0 2016-04-21 09:08:13
Use this用这个
header {
background: green;
height: 600px;
position:absolute;
left:0;
top:0;
}
解决方案3
0 2016-04-21 09:19:46
The green header is 600 px high because of your CSS.由于您的 CSS，绿色标题高 600 像素。 Adjust the height: value as needed.根据需要调整height:值。
Also, <header> is a regular page content tag and therefore should be placed inside <body> , not before it.此外， <header>是一个常规的页面内容标签，因此应该放在<body> ，而不是在它之前。
解决方案4
0 2016-04-21 09:19:59
First: put header tag inside body tag.首先：将标题标签放在正文标签内。 Not outside.不在外面。
<body> <header> Some Header information and navigation </header> <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe> </body>
Second: Remove 600px height from header css.第二：从标题 css 中删除 600px 高度。
Profit :)利润 ：）
解决方案5
0 2016-04-21 09:31:34
use following code :使用以下代码：
<header>
Some Header information and navigation
</header>
<body>
<div>
<iframe src="#" width="100%" height="400" id="iFrm"></iframe>
</div>
</body>
<script type="text/javascript">
var body = document.body,
html = document.documentElement;
var documentHeight = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
var iframeHeight = parseInt(document.getElementById("iFrm").getAttribute("height"))
document.getElementById("iFrm").style.marginTop = (documentHeight - iframeHeight) / 2;
</script>
Its working fine for me.它对我来说工作正常。 Hopefully works for you希望对你有用
解决方案6
0 2016-04-21 09:35:38
Not really sure if you want it to be like this but try it out不确定你是否希望它像这样但试试看
<header>
Some Header information and navigation
</header>
<body>
<iframe class="test" src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
css: css：
header {
background: green;
height: 600px;
}
.test {
position: fixed;
top: 0;
z-index: 1;
}
But you could use angularjs modal_dialogue to make a pop up window which would display your information from an url.但是您可以使用 angularjs modal_dialogue 来制作一个弹出窗口，该窗口将显示来自 url 的信息。
解决方案7
0 2019-12-29 01:09:05
This worked for me.这对我有用。 My iframe html has:我的 iframe html 有：
<body class="container-fluid">
<div class="admin-pages" id="top-of-page">
etc...
</div>
</body>
And javascript:和 javascript：
$(window).on('load', function() {
$("#top-of-page").scroll();
etc...
Takes the iframe to the #top-of-page when the page loads.页面加载时将 iframe 带到 #top-of-page。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.