我正在iframe上工作,我需要在宽度约300像素,高度约150像素的iframe中显示页面的某个部分[例如,右上角]。
例:
说我希望把一个IFRAME的www.mywebsite.com/portfolio.php在页面上,但有IFRAME大小,只显示“投资组合运动在”部分右上角。
我该如何实现?
谢谢。
编辑:演示
[感谢Pointy]
Answers:
一个<iframe>
让你与工作完整的窗口。做您想要的事情的最直接方法是让服务器为您提供一个完整的页面,其中仅包含您要显示的片段。
作为替代方案,您可以只使用一个简单的方法,<div>
并使用jQuery的“加载”功能加载整个页面,然后仅提取所需的部分:
$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');
您可能还需要做其他事情,并且最大的区别是内容将成为主页的一部分,而不是被隔离到单独的窗口中。
.load()
除非源站点设置适当的CORS标头,否则它将无法工作。如果确实加载,则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,该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设置为适当的宽度和高度,并将滚动属性设置为“否”。
如果所需区域不在页面的左上角,则可以将内容滚动到适当的区域。请参考以下问题:
我相信只有两个页面都在同一个域中时,您才能滚动它。
假设您正在使用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;">