如何裁剪 iframe 的内容以显示页面的一部分？答案

【问题标题】：How do I crop the contents of an Iframe to show a part of a page?如何裁剪 iframe 的内容以显示页面的一部分？
【发布时间】：2011-08-06 07:23:55
【问题描述】：

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

【问题讨论】：

标签： asp.net html iframe

【解决方案1】：

有什么方法可以裁剪下载页面的内容，只在我的网站上显示该页面的一部分？

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

可以通过将iframe 放入具有定义的高度和宽度的div 容器中，并使用overflow: hidden 来裁剪视口：

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

并给iframe一个相对位置：

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

这样，您可以调整页面上可见的 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>

这段代码对我有用。

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

【讨论】：

第三行多了一个
。

【解决方案3】：

为了裁剪嵌入 page 底部的广告，我使用了以下内容：

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

【讨论】：

【解决方案4】：

在 iframe 中你不能这样做......但是如果你使用 HTTPWebRequest/WebResponse 那么它非常简单......

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

http://htmlagilitypack.codeplex.com/

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

【讨论】：

【解决方案5】：

此代码对我有用...将 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>

【讨论】：

【解决方案6】：

我设法阻止页面滚动。只需添加：scrolling="no"

<div class="form-computer">
    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf_rtGkQkzqHEw1IBk53QDITiSWDYW5RJQKDUvojAGN5dIXsg/viewform?embedded=true"
        width="100%" height="1915px" style="position: relative; top: -135px"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        scrolling="no"
        >Social Media Use
    </iframe>
  </div>

【讨论】：