我正在处理 iframe，我需要在大约 300 像素宽度和 150 像素高度的 iframe 中显示页面的特定部分 [比如右上角]。
示例：
假设我想在页面上放置 www.mywebsite.com/portfolio.php 的 iframe，但 iframe 的大小仅显示“portfolio-sports”部分位于右上角。
我怎样才能做到这一点？
谢谢。
编辑：DEMO
[感谢Pointy]
【问题讨论】：
<iframe> 确实是正确的方法。
<iframe> 为您提供了一个完整的工作窗口。做你想做的最直接的方法是让你的服务器给你一个完整的页面，只包含你想要显示的片段。
作为替代方案，您可以只使用一个简单的<div> 并使用 jQuery 的“加载”函数来加载整个页面并仅提取您想要的部分：
$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');
您可能还需要做其他事情，一个显着的区别是内容将成为主页的一部分，而不是被隔离到单独的窗口中。
【讨论】：
.load() 将不起作用。如果它确实加载了，那么 POST 应该可以正常工作。
load() 从页面加载的任何脚本/样式。您必须使用 $.getScript 处理此问题。
这项工作对我有好处。
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>
这是否适合您或不让我们知道。
来源：http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
【讨论】：
我需要一个 iframe，它可以嵌入带有垂直滚动条的外部页面的一部分，从而裁剪页面顶部和左侧的导航菜单。我可以用一些简单的 HTML 和 CSS 来做到这一点。
HTML
<div id="container">
<iframe id="embed" src="http://www.example.com"></iframe>
</div>
CSS
div#container
{
width:840px;
height:317px;
overflow:scroll; /* if you don't want a scrollbar, set to hidden */
overflow-x:hidden; /* hides horizontal scrollbar on newer browsers */
/* resize and min-height are optional, allows user to resize viewable area */
-webkit-resize:vertical;
-moz-resize:vertical;
resize:vertical;
min-height:317px;
}
iframe#embed
{
width:1000px; /* set this to approximate width of entire page you're embedding */
height:2000px; /* determines where the bottom of the page cuts off */
margin-left:-183px; /* clipping left side of page */
margin-top:-244px; /* clipping top of page */
overflow:hidden;
/* resize seems to inherit in at least Firefox */
-webkit-resize:none;
-moz-resize:none;
resize:none;
}
【讨论】：
<div style="position: absolute; overflow: hidden; 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://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>
【讨论】：
不知何故我摆弄了一下，以及我是如何让它工作的：
<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>
我认为这是第一次发布此代码所以分享它
【讨论】：
将 iframe 设置为适当的宽度和高度，并将滚动属性设置为“no”。
如果您想要的区域不在页面的左上角，您可以将内容滚动到适当的区域。参考这个问题：
Scrolling an iframe with javascript?
我相信只有当两个页面在同一个域中时，您才能滚动它。
【讨论】：
假设您使用 iframe 将公众可用但不归您所有的内容导入您的网站，您始终可以使用页面锚点将 iframe 引导到您想要的位置。
首先，您创建一个具有显示数据所需宽度和高度的 iframe。
<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>
第二次安装插件，例如 Firefox 的 Show Anchors 2，并使用它来显示您希望在 iframe 中显示的页面上的所有页面锚点。找到您希望框架使用的锚点并通过右键单击它来复制锚点位置。
（您可以在这里下载并安装插件 => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/）
第三次使用复制的带有锚点的网址作为您的 iframe 源。当框架加载时，它将显示从您指定的锚点开始的页面。
<iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>
那是精简的指令列表。希望对您有所帮助！
【讨论】：
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
【讨论】：