Question

我有一个页面需要通过iframe提供，但我只需要显示部分页面，而不是整个页面。

我目前的代码是：

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

我认为最好的选择是在包含“具有溢出：隐藏”的div中提供iframe，使其像一个相框一样。这是有效的，但问题是我想要显示的内容位于iframe页面的中间，div总是假设0,0是帧的开头。我需要定位iframe，以便div正好在我希望可见的页面部分上。

我可以这样做吗？

Answer 1

使用margin-top和margin-left的负值来定位iframe。请看下面的代码：

<div style="display:block;overflow:hidden;width:500px;height:350px;">
<iframe style="margin-top:-100px;margin-left:-100px" height="350px" scrolling="no"
src="http://my/page/i/want/to/show/part/of/here/" width="500px"></iframe></div>

Answer 2

在iframe中显示的内容中，如果您可以设置一个ID为元素的元素，该ID标记您想要达到峰值的内容部分的最顶部，那么您可以设置iframe的src属性。 URL

iframe内容的HTML：

[a bunch of markup/stuff that you don't want to show]
....
<div id="topOfVisibleArea"></div>

[more markup]

iframe代码：

<iframe height="350px" scrolling="no" 
src="http://my/page/i/want/to/show/part/of/here/#topOfVisibleArea" 
width="500px"></iframe>

更新 - 更好的方法：

或者您可以在div中的iframe上使用绝对定位。你需要iframe的高度和宽度比你装入它的窗口更宽更高，以容纳偏移量。

请参阅此示例：http://jsfiddle.net/sNSMw/

Answer 3

<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713&quot; frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>

Answer 4

Trick全部位于 iframe样式参数中。放置在其他容器中将有助于对齐要求。

<div style="border: 1px solid red; width: 70px; height: 20px; overflow:  
hidden;"><iframe style="width: 400px; height: 800px; margin-top: -200px; 
margin-left: -200px;" src="http://www.amazon.co.uk/product-reviews
/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&
sortBy=bySubmissionDateDescending" width="320" height="240"></iframe>
</div>

感谢spamtech.co.uk提供的帮助和示例：http://spamtech.co.uk/tips/position-content-inside-an-iframe/

在包含div中定位iframe的内容

4 个答案: