如何裁剪Iframe的内容以显示页面的一部分?

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从另一个网站下载内容。我是否可以裁剪下载页面的内容，只在我的网站上显示该页面的一部分?

5 个解决方案

#1

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.

不。同源策略阻止您以任何方式操作iframe，包括滚动位置。

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:

通过将iframe放入一个定义了高度和宽度的div容器中，并将overflow隐藏起来，以剪贴视图端口:

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

and giving the iframe a 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中滚动这样的影响。

#2

<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]

#3

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

在我看来你做不到……但是如果你使用HTTPWebRequest/WebResponse，那么它很简单……

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 ...

这包很重要……您可以通过id读取特定的div /span…

#4

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>

#5

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.

这段代码对我有用……调整边缘-顶部和边缘-左边到最适合您的值，调整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>

#1