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>
最良の選択肢は、「overflow:hidden」を含む div 内で iframe を提供して、額縁のように機能させることだと考えました。それは機能しますが、問題は、表示したいコンテンツが iframe ページの中央にあり、div が常に 0,0 がフレームの開始であると想定していることです。表示したいページの部分に div が正確に重なるように、iframe を配置する必要があります。
これはできますか？
iframe を配置するには、margin-top と margin-left に負の値を使用します。以下のコードを見てください。
<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>
iframe 内に表示されるコンテンツで、ピークを通過したいコンテンツの部分の最上部をマークする 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/
トリックはすべて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/
<iframe name="itunes" src="http://itunes.apple.com/us/album/threads/id509846713" frameborder="0" width="500" height="600" onload="window.frames['itunes'].scrollTo(250,250)"></iframe>