jQuery iframe 只显示页面的特定部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3272071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframe to Only Show a Certain Part of the Page
提问by MANnDAaR
I am working on iframes, and I need to show a certain portion of the page [say, the top right ] in an iframe with about 300px width and 150px height.
我正在处理 iframe，我需要在大约 300px 宽和 150px 高的 iframe 中显示页面的某个部分 [比如，右上角]。
Example:
例子：
Say I wanted to put an iframeof www.mywebsite.com/portfolio.phpon a page, but have the iframe sized to only show the "portfolio-sports" section at the top right.
说我希望把一个IFRAME的www.mywebsite.com/portfolio.php在页面上，但有IFRAME大小，只显示“投资组合运动在”部分右上角。
How can I achieve this ?
我怎样才能做到这一点？
Thanks.
谢谢。
EDIT: DEMO
编辑：演示
[ Thanks to Pointy ]
[ 感谢 Pointy ]
回答by Pointy
An <iframe>gives you a complete window to work with. The most direct way to do what you want is to have your server give you a complete page that only contains the fragment you want to show.
An<iframe>为您提供了一个完整的工作窗口。做你想做的最直接的方法是让你的服务器给你一个完整的页面，其中只包含你想要显示的片段。
As an alternative, you could just use a simple <div>and use the jQuery "load" function to load the whole page and pluck out just the section you want:
作为替代方案，您可以只使用一个简单的<div>并使用 jQuery 的“加载”函数来加载整个页面并仅提取您想要的部分：
$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');
There may be other things you need to do, and a significant difference is that the content will become part of the main page instead of being segregated into a separate window.
您可能还需要做其他事情，一个显着的区别是内容将成为主页的一部分，而不是被隔离到单独的窗口中。
回答by Shiku gfa
I got this work good for me.
我得到了这份工作对我有好处。
<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>
Is this working for you or not let us know.
这对您有用还是不让我们知道。
Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
来源：http: //www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
回答by dmatamales
I needed an iframe that would embed a portion of an external page with a vertical scroll bar, cropping out the navigation menus on the top and left of the page. I was able to do it with some simple HTML and CSS.
我需要一个 iframe，它可以嵌入带有垂直滚动条的外部页面的一部分，裁剪出页面顶部和左侧的导航菜单。我可以用一些简单的 HTML 和 CSS 来完成。
HTML
HTML
<div id="container">
<iframe id="embed" src="http://www.example.com"></iframe>
</div>
CSS
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;
}
回答by TangentSpy
Somehow I fiddled around and some how I got it to work:
不知何故，我摆弄了一些我是如何让它工作的：
<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>
I think this is the first time this code has been posted so share it
我认为这是第一次发布此代码，所以分享它
回答by Shuvojit Das
<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>
回答by BrandonG
Set the iframe to the appropriate width and height and set the scrolling attribute to "no".
将 iframe 设置为适当的宽度和高度，并将滚动属性设置为“no”。
If the area you want is not in the top-left portion of the page, you can scroll the content to the appropriate area. Refer to this question:
如果您想要的区域不在页面的左上角，您可以将内容滚动到适当的区域。参考这个问题：
Scrolling an iframe with javascript?
I believe you'll only be able to scroll it if both pages are on the same domain.
我相信只有当两个页面都在同一个域中时，您才能滚动它。
回答by AmarieK
Assuming you are using an iframe to import content available to the public but not owned by you into your website, you can always use the page anchor to direct you iframe to load where you want it to.
假设您使用 iframe 将可供公众使用但不属于您的内容导入您的网站，您始终可以使用页面锚点将 iframe 引导到您想要的位置。
First you create an iframe with the width and height needed to display the data.
首先，您创建一个具有显示数据所需的宽度和高度的 iframe。
<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>
Second install addon such as Show Anchors 2 for Firefox and use it to display all the page anchors on the page you would like display in your iframe. Find the anchor point you want your frame to use and copy the anchor location by right clicking on it.
第二个安装插件，例如 Show Anchors 2 for Firefox，并使用它来显示您希望在 iframe 中显示的页面上的所有页面锚点。找到您希望框架使用的锚点并通过右键单击来复制锚点位置。
(You can download and install the plugin here => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)
（您可以在此处下载并安装插件 => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/）
Third use the copied web address with anchor point as your iframe source. When the frame loads, it will show the page starting at the anchor point you specified.
第三，使用复制的带有锚点的网址作为 iframe 源。当框架加载时，它将显示从您指定的锚点开始的页面。
<iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>
That is the condensed instruction list. Hope it helps!
那是简明的指令列表。希望能帮助到你！
回答by Ravindra
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
