iframe仅显示页面的特定部分


75

我正在iframe上工作,我需要在宽度约300像素,高度约150像素的iframe中显示页面的某个部分[例如,右上角]。

例:

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

我该如何实现?

谢谢。

编辑演示

[感谢Pointy]


iframe与父页面位于同一个域中吗?
尼克·克拉弗

3
我认为使用an并不是<iframe>实现此目的的正确方法。
尖尖的2010年

Answers:


83

一个<iframe>让你与工作完整的窗口。做您想要的事情的最直接方法是让服务器为您提供一个完整的页面,其中仅包含您要显示的片段。

作为替代方案,您可以只使用一个简单的方法,<div>并使用jQuery的“加载”功能加载整个页面,然后仅提取所需的部分:

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

您可能还需要做其他事情,并且最大的区别是内容将成为主页的一部分,而不是被隔离到单独的窗口中。


谢谢Pointy。这正是我正在查看的内容-“跳过的iframe”。
曼那(MannDAaR)2010年

1
不确定,但是如果加载的html包含POST表单,由于安全限制(相同的原始策略),我不确定向服务器提交的工作是否正常。
2014年

2
@Paolo很好,如果它来自不同域的内容,那么.load()除非源站点设置适当的CORS标头,否则它将无法工作。如果确实加载,则POST应该可以正常工作。
Pointy 2014年

的确,谢谢。无论如何,我仍然尝试尝试,并且萤火虫说:“跨域请求被阻止:同一起源策略不允许在example.com上读取远程资源。可以通过将资源移至相同域或启用CORS来解决此问题。”
Paolo 2014年

3
请注意,这不会运行通过jQuery从页面加载的任何脚本/样式load()。您必须使用$.getScript其他方法来处理此问题。
adamj

37

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

<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


3
我认为这是正确的解决方案,可接受的答案无法满足iframe的要求。
TᴀʀᴇǫMᴀʜᴍᴏᴏᴅ

完美的解决方案。非常感谢。
Vivek Sancheti

滚动否不适用于react js应用程序
yaswanthkoneri,

最佳答案和解决方案
h1h2

13

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

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

1
我喜欢这个主意。我在网站上使用了它,工作正常,但每次目标网站更新其内容时都需要进行更新
ReaperSoon

5

我不知何故摆弄了些什么,以及如何使它起作用:

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

我认为这是第一次发布此代码,请分享


我认为#inside应该是外部网站的一部分,该外部网站将不受我们的控制。
Kurkula

2

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

如果所需区域不在页面的左上角,则可以将内容滚动到适当的区域。请参考以下问题:

使用JavaScript滚动iframe?

我相信只有两个页面都在同一个域中时,您才能滚动它。


1

假设您正在使用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>

那是简明指令列表。希望能帮助到你!


-4
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">


7
请添加有关您的解决方案的一些评论,说明为什么以及如何解决该问题。
2015年

2
抱歉,这无济于事。
holycatcrusher
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.