定位內容框中的iframe內容

我有一個需要通過iframe提供的頁面，但我只需要顯示頁面的一部分，而不是整個內容。定位內容框中的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>

我認爲最好的辦法是投放具有「溢出：隱藏」含有專區內的iframe，以便它就像一個相框。這是有效的，但問題是我想顯示的內容位於iframe頁面的中間，div始終假定0,0是框架的開始。我需要定位iframe，以便div正好在我希望可見的頁面部分上。

我可以這樣做嗎？

來源

2012-04-18 user1149499

試試這個：HTTP：//stackoverflow.com/a/21004331/1873806 – Svet 2016-10-13 00:08:37

在iframe中顯示的內容中，如果您可以設置一個標識內容部分最頂部的id的元素，那麼您可以通過該標籤設置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-18 14:06:42 Faust

......儘管這不會解決一個水平偏移要求。 – Faust 2012-04-18 14:08:10

啊，好點，只有我沒有任何控制iframe中頁面的來源。因此，必須在初始頁面上進行任何調整。 – user1149499 2012-04-18 14:14:16

爲什麼Firefox中的內容位置比Chrome中低？如果你比較它，你會看到他們不顯示完全相同的內容。這可以解決嗎？ – orschiro 2012-09-28 10:24:51

<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-19 06:40:37 Thiwanka

當iframe包含外部網頁時不起作用。該腳本被瀏覽器阻止。 – 2014-12-18 14:33:16

使用邊距和利潤率左定位的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-23 19:57:58 krisrak

訣竅是所有在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-24 20:18:46 l0g1kaL

定位內容框中的iframe內容

回答

相關問題