How do I crop the contents of an Iframe to show a

2019-02-02 02:15发布

站内问答 / 前端开发
1369 5 5

I am currently working on a website which must download content from another website through the use of an iframe. Is there any way that I can crop the contents of the downloaded page to only show a section of that page on my website?

5条回答
Root（大扎）
2楼-- · 2019-02-02 02:30 
<div style="position: absolute; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://www.centricle.com/tools/html-entities/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

This code worked for me.

Source [ http://extechbuzz.blogspot.com/2012/12/iframe-how-to-display-specific-part-of.html ]

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-02-02 02:37

In iframe you cant do it...but if you use HTTPWebRequest/WebResponse then its very simple...

http://www.codeproject.com/KB/IP/httpwebrequest_response.aspx

http://htmlagilitypack.codeplex.com/

This pack is very important...you can read specific div /span by id ...

查看更多
0人赞 添加讨论(0) 举报
够拽才男人
4楼-- · 2019-02-02 02:39

Is there any way that I can crop the contents of the downloaded page to only show a section of that page on my website?

No. The Same Origin Policy prevents you from manipulating the iframe in any way, including the scroll position.

There would be a workaround by putting the iframe into an a div container that has a defined height and width, and overflow: hidden to clip the view port: 

<div style="width: 500px; height: 500px; overflow: hidden">

and giving the iframe a relative position:

<iframe src="..." style="position: relative; left: -100px; top: -100px">

this way, you can adjust the portion of the iframe that is visible on the page. However, the whole page still gets rendered, and this approach is not immune to influences like scrolling inside the iframe.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
5楼-- · 2019-02-02 02:39

This code worked for me... Adjust the margin-top and margin-left to whatever value suits you best and adjust height and width of iframe to whatever value you want. 

<html>
<div style="overflow: hidden; margin-top: -1440px; margin-left:0;">
<iframe src="https://fiitjeelogin.com/StartPage.aspx" scrolling="no" height="1550"width="300" frameBorder="0">
</iframe>
</div>
</html>
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
6楼-- · 2019-02-02 02:47

To crop off the ads at the bottom of the embedded page, I used the following:

<div style="width: 1000px; height: 390px; overflow: hidden">
<iframe src="https://openflights.org/user/dankohn1" width="1000"
height="600" style="border:none" scrolling="no">
</iframe></div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)