偏移iframe中的网页位置 [英] Offset a webpage position inside iframe

问题描述

我有一个iframe弹出窗口，应该加载一个窗体。

表单是较大页面的一部分，并包含一些输入字段。

在这种情况下，iframe它加载它（并且限制到约1000px宽）作为一个窗口到不同的页面。

有一种方法来对齐而不是iframe，当它加载它吗？我想加载整个html文档在iframe内部，但有一个偏移量，使得iframe窗口只显示通常在一侧或底部或某事上截断的字段，看到iframe大小有限，但页面

解决方案

有几种方法可以做到这一点，你可以在url中包含一个id，如：
http://somesite.com/yourpage#anchor

这个工作，但如果你不拥有的网站iframe（像某种自定义视频网站没有iframe集成）你可以通过css与一个空的偏移div之前：
http://aldebaranwebdesign.com/blog/how-to-position -a-page-within-an-iframe /

您的CSS：

  #outerdiv 
 {
 width：446px; 
 height：246px; 
 overflow：hidden; 
 position：relative; 
} 
 
 #inneriframe 
 {
 position：absolute; 
 top：-412px; 
 left：-318px; 
 width：1280px; 
 height：1200px; 
} 
  

html：

 < div id ='outerdiv'> 
< iframe src =http：//www.siteto integrate.com/id ='inneriframe'scrolling = no>< / iframe> 
< / div> 
  

I have an iframe pop-up that is supposed to load a form.

The form is part of a larger page and contains some input fields.

In this case, the iframe which loads it (and is limited to about 1000px wide) acts as a "window" into a different page.

Is there a way to align not the iframe but the content itself when it loads in it? I want to load the whole entire html document inside the iframe but with an offset so that the iframe window shows just the fields that would normally be cutoff on a side or on the bottom or something, seeing how the iframe size is limited but the page being displayed is not.

解决方案

There are several ways to do this, you can include an id in the url like: http://somesite.com/yourpage#anchor

This works but if you do not own the site you iframe (like some sort of custom video site with no iframe integration) you can do it via css with an empty offseted div before: http://aldebaranwebdesign.com/blog/how-to-position-a-page-within-an-iframe/

Your CSS:

#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top:-412px;
left:-318px;
width:1280px;
height:1200px;
}

The html:

<div id='outerdiv'>
<iframe src="http://www.siteto integrate.com/" id='inneriframe' scrolling=no></iframe>
</div>

这篇关于偏移iframe中的网页位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！