Question

我正在制作iframe，我需要在iframe中显示页面的某个部分[例如，右上角]，宽度约为300px，高度为150px。

示例：

说我想在页面上放置 www.mywebsite.com/portfolio.php 的 iframe ，但iframe的大小只能显示“ portfolio-sports “右上角部分。

我怎样才能做到这一点？

感谢。

编辑：DEMO

[感谢Pointy]

Answer 1

<iframe>为您提供了一个完整的工作窗口。做你想做的最直接的方法是让你的服务器给你一个只包含你想要显示的片段的完整页面。

作为替代方案，您可以使用简单的<div>并使用jQuery“load”函数加载整个页面并选择您想要的部分：

$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');

您可能还需要做其他事情，一个显着的区别是内容将成为主页的一部分，而不是分隔到一个单独的窗口。

Answer 2

我的这项工作对我有好处。

<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

Answer 3

我需要一个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;
}

Answer 4

不知怎的，我摆弄了一些，以及我如何让它发挥作用：

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

我认为这是第一次发布此代码所以分享它

Answer 5

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

Answer 6

将iframe设置为适当的宽度和高度，并将滚动属性设置为“no”。

如果您想要的区域不在页面的左上角，则可以将内容滚动到适当的区域。请参阅此问题：

Scrolling an iframe with javascript?

我相信如果两个页面都位于同一个域中，您将只能滚动它。

Answer 7

假设您使用iframe导入公众可用但不属于您的网站的内容，您可以随时使用页面锚点来指导您将iframe加载到您想要的位置。

首先，创建一个iframe，其中包含显示数据所需的宽度和高度。

<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>

第二次安装插件，例如Firefox的Show Anchors 2，并使用它来显示您想要在iframe中显示的页面上的所有页面锚点。找到您希望框架使用的锚点，并通过右键单击它来复制锚点位置。

（您可以在此处下载并安装插件=＆gt; 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>

这是精简指令列表。希望它有所帮助！

iframe只显示页面的某个部分

7 个答案: