4

我有一个页面需要通过 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 正好位于我希望可见的页面部分上方。

我可以这样做吗？

4

4 回答 4

7

对 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>
于 2013-08-23T19:57:58.843 回答
3

在 iframe 中显示的内容中，如果您可以设置一个带有 id 的元素，该 id 标记您想要通过的内容部分的最顶部，那么您可以使用 url 上的锚点设置 iframe 的 src 属性

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/

于 2012-04-18T14:06:42.320 回答
2 
<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>
于 2013-03-19T06:40:37.380 回答
2

窍门全在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/

于 2015-03-24T20:18:46.350 回答