iframe只显示页面的某个部分

Question

我正在研究iframe,我需要在iframe中显示页面的某个部分[例如,右上角],宽度约为300px,高度为150px.

例:

说我希望把一个IFRAME的www.mywebsite.com/portfolio.php在页面上,但有IFRAME大小,只显示" 投资组合运动在"部分右上角.

我怎样才能做到这一点？

谢谢.

编辑:演示

[感谢Pointy]

Answer 1

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