Question

我通过iframe将wetransfer嵌入到网站中，但问题是当页面加载时，它会自动跳过网站的标题部分，而不是在页面顶部加载新页面。

如何阻止这种情况发生？我尝试使用jquery scrollto，但没有任何区别。

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

Answer 1

标题高度为600px，因此iframe位于正后方。

如果您希望iframe从顶部覆盖页面，则应设置

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

fiddle

如果您想将iframe放在标题后面，只需删除

即可

height: 600px;

fiddle 2

Answer 2

使用此

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

Answer 3

由于您的CSS，绿色标题高600像素。根据需要调整height:值。

此外，<header>是常规页面内容标记，因此应放在<body>内，而不是在Default-667h@2x.png之前。

Answer 4

首先：将标头标签放在body标签内。不在外面。

＆＃13;

<div class="a b">

</div>

＆＃13;

第二：从标题css中删除600px高度。

利润：）

Answer 5

使用以下代码：

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

它对我来说很好。希望对你有用

Answer 6

不确定你是否希望它像这样但是试试看

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

但你可以使用angularjs modal_dialogue来制作一个弹出窗口，它会显示你的网址信息。

Answer 7

这对我有用。我的iframe html具有：

  <body class="container-fluid">
    <div class="admin-pages" id="top-of-page">
      etc...
    </div>
  </body>

和javascript：

$(window).on('load', function() {
  $("#top-of-page").scroll();
  etc...

页面加载时将iframe转到页面的顶部。

iframe加载在页面中间，而不是页面顶部

7 个答案: