iframe loading in middle of page, instead of top of page
Question
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.
How can I stop this from happening? I tried using jquery scrollto, but doesn't make any difference.
https://jsfiddle.net/dbruning22/c0s6mhkv/1/
HTML
<header>
Some Header information and navigation
</header>
<body>
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</body>
CSS
header {
background: green;
height: 600px;
}
7 answers
solution1
0 2016-04-21 09:08:13
solution2
0 2016-04-21 09:08:13
Use this
header {
background: green;
height: 600px;
position:absolute;
left:0;
top:0;
}
solution3
0 2016-04-21 09:19:46
The green header is 600 px high because of your CSS. Adjust the height: value as needed.
Also, <header> is a regular page content tag and therefore should be placed inside <body> , not before it.
solution4
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.
Profit :)
solution5
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
solution6
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:
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.
solution7
0 2019-12-29 01:09:05
This worked for me. My iframe html has:
<body class="container-fluid">
<div class="admin-pages" id="top-of-page">
etc...
</div>
</body>
And javascript:
$(window).on('load', function() {
$("#top-of-page").scroll();
etc...
Takes the iframe to the #top-of-page when the page loads.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.