Html 如何裁剪 Iframe 的内容以显示页面的一部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5676672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I crop the contents of an Iframe to show a part of a page?
提问by Eon
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?
我目前正在一个网站上工作，该网站必须通过使用 iframe 从另一个网站下载内容。有什么方法可以裁剪下载页面的内容以仅在我的网站上显示该页面的一部分？
回答by Pekka
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 iframein any way, including the scroll position.
不可以。同源策略阻止您iframe以任何方式操纵，包括滚动位置。
There would be a workaround by putting the iframeinto an a divcontainer that has a defined height and width, and overflow: hiddento clip the view port:
有一种解决方法是将iframe放入div具有定义高度和宽度的容器中，并overflow: hidden剪辑视口：
<div style="width: 500px; height: 500px; overflow: hidden">
and giving the iframea relative position:
并给出iframe一个相对位置：
<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.
这样，您可以调整页面上可见的 iframe 部分。但是，整个页面仍然会被渲染，并且这种方法无法避免在 iframe 内滚动等影响。
回答by Razzak
<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]
来源 [ http://extechbuzz.blogspot.com/2012/12/iframe-how-to-display-specific-part-of.html]
回答by Dan Kohn
回答by Kishan Gajjar
In iframe you cant do it...but if you use HTTPWebRequest/WebResponse then its very simple...
在 iframe 中你不能这样做......但是如果你使用 HTTPWebRequest/WebResponse 那么它非常简单......
http://www.codeproject.com/KB/IP/httpwebrequest_response.aspx
http://www.codeproject.com/KB/IP/httpwebrequest_response.aspx
http://htmlagilitypack.codeplex.com/
http://htmlagilitypack.codeplex.com/
This pack is very important...you can read specific div /span by id ...
这个包很重要...你可以通过id读取特定的div/span...
回答by Kishan Gajjar
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.
这段代码对我有用...将 margin-top 和 margin-left 调整为最适合您的任何值，并将 iframe 的高度和宽度调整为您想要的任何值。
<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>
