Iframe laden in der Mitte der Seite, anstelle von Seitenanfang

Ich bin Wetransfer iframe in eine Website einbetten, aber das Problem, das ich habe, wenn die Seite geladen wird, springt automatisch über den Header-Abschnitt der Website statt Die neue Seite wird oben auf der Seite geladen.Iframe laden in der Mitte der Seite, anstelle von Seitenanfang

Wie kann ich dies verhindern? Ich habe versucht, mit jquery scrollto, aber macht keinen Unterschied.

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; 
}

Quelle

2016-04-21 Bonzai

Kopfhöhe ist 600px so iframe direkt hinter platziert wird.

Wenn Sie iframe wollen die Seite von oben abdecken sollten Sie

iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
}

fiddle

gesetzt Wenn Sie iframe direkt hinter Header platzieren möchten, entfernen Sie einfach

height: 600px;

fiddle 2

Quelle

2016-04-21 09:08:13 pumpkinzzz

Verwenden Sie diese

header { 
    background: green; 
    height: 600px; 
    position:absolute; 
    left:0; 
    top:0; 
}

Quelle

2016-04-21 09:08:13

Der grüne Header ist aufgrund Ihrer CSS 600 px hoch. Passen Sie den Wert height: nach Bedarf an.

Auch <header> ist eine regelmäßige Seite Content-Tag und sollte daher innerhalb <body>, nicht davor platziert werden.

Quelle

2016-04-21 09:19:46

Zuerst: Header-Tag in Body-Tag setzen. Nicht draußen.

<body> 
 
<header> 
 
    Some Header information and navigation 
 
</header> 
 
    <iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe> 
 
</body>

Zweitens: entfernen 600px Höhe von Header CSS.

Profit :)

Quelle

2016-04-21 09:19:59

Der Header außerhalb des Body-Tags war ein Tippfehler, würde aber keinen Unterschied machen, wie der Iframe erzeugt wird. Die Höhe der Kopfzeile wird auf die Höhe des Benutzerbildschirms eingestellt und es gibt ein großes Hintergrundbild, Logos und einige Animationen. Ich habe gerade die feste Höhe von 600px hinzugefügt, um den Punkt zu verdeutlichen, dass er beim Laden in die Mitte des Bildschirms springt. – Bonzai

Verwendung folgenden 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>

Seine gut für mich arbeiten. Hoffentlich funktioniert für Sie

Quelle

2016-04-21 09:31:34

Nicht wirklich sicher, wenn Sie es so sein wollen, aber probieren Sie es aus

<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; 
}

Aber man konnte AngularJS modal_dialogue verwenden, um ein Pop-Make-up Fenster, das Ihre Informationen von einer URL anzeigen würde.

Quelle

2016-04-21 09:35:38 Frutis

Iframe laden in der Mitte der Seite, anstelle von Seitenanfang

Antwort

Verwandte Themen