iframe只显示页面的某个部分

我正在研究iframe,而且我需要在iframe中显示页面的某个部分(比如右上angular),大小约为300px,高度为150px。

例:

假设我想将www.mywebsite.com/portfolio.phpiframe放在页面上,但是iframe的大小只能显示右上angular的“ portfolio-sports ”部分。

我怎样才能做到这一点?

谢谢。

编辑 : 演示

[感谢Pointy]

一个<iframe>给你一个完整的窗口来处理。 最直接的做法是让你的服务器给你一个完整的页面,只包含你想要显示的片段。

或者,你可以使用一个简单的<div>并使用jQuery的“加载”函数来加载整个页面,只是select你想要的部分:

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

您可能还需要做其他事情,而且显着的不同之处在于内容将成为主页面的一部分,而不是分隔为单独的窗口。

我得到了这个工作对我很好。

 <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

我需要一个embedded一个垂直滚动条的外部页面的一部分的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”。

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

用JavaScript滚动iframe?

我相信只有当这两个页面在同一个域上时,你才能够滚动它。

假设您正在使用iframe将可供公众使用但不属于您的内容导入到您的网站中,则始终可以使用页面定位器来指导您将iframe加载到您想要的位置。

首先,创build一个具有显示数据所需宽度和高度的iframe。

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

第二次安装插件,如Show Anchors 2 for Firefox,并使用它来显示页面上的所有页面锚点,你希望显示在你的iframe中。 find想要使用框架的定位点,然后右键单击定位点复制定位点。

(你可以在这里下载并安装插件=> https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/

第三,使用带有锚点的复制url作为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;">