如何裁剪 Iframe 的内容以显示页面的一部分? [英] How do I crop the contents of an Iframe to show a part of a page?

问题描述

我目前正在开发一个网站，该网站必须通过使用 iframe 从另一个网站下载内容.有什么方法可以裁剪下载页面的内容以仅在我的网站上显示该页面的一部分?

解决方案

有什么办法可以裁剪下载页面的内容以仅在我的网站上显示该页面的一部分?

没有.同源策略可防止您以任何方式操纵 iframe，包括滚动位置.

将 iframe 放入具有定义高度和宽度的 div 容器和 overflow: hidden剪辑视口:

并给 iframe 一个相对位置:

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

通过这种方式，您可以调整页面上可见的 iframe 部分.但是，整个页面仍然会被渲染，并且这种方法无法避免在 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?

解决方案

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.

这篇关于如何裁剪 Iframe 的内容以显示页面的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！