Html 如何只将网站的某个部分放入 iframe 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14117763/
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
How do you put only a certain section of a website into an iframe?
提问by Brian Smith
I'm looking to put only a small part of a website into an iframe. How would I do this? Usually when I set up a iframe for a website (lets say yahoo) it gets the whole website... Lets say I only wanted a small portion of the website, how would I do this?
我希望只将网站的一小部分放入 iframe。我该怎么做？通常，当我为网站（比如雅虎）设置 iframe 时，它会获取整个网站......假设我只想要网站的一小部分，我该怎么做？
Is it possible to put margins on an iframe of a website?
是否可以在网站的 iframe 上设置边距？
I'm looking to put an iframe of a website on my website. (if that makes sense)
我想在我的网站上放置一个网站的 iframe。（如果这是有道理的）
Thanks in advance :D
提前致谢
回答by Tahir Yasin
In most of the cases the reference is external and you don't have control over the external page. Thus you've to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they're all a bad solution, because the scrolling occurs only after the page is loaded. The Solution
在大多数情况下，引用是外部的，您无法控制外部页面。因此，您必须将 IFRAME 内容滚动到所需位置。这当然是不可能的。是的，有一些 JavaScript 技巧，但它们都是一个糟糕的解决方案，因为滚动仅在页面加载后发生。解决方案
You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.
您可以将 IFRAME 包装到 div 中并使用绝对 TOP 和 LEFT CSS 属性滚动 DIV 内容。
Here's an example:
下面是一个例子：
#my-div
{
width : 400px;
height : 200px;
overflow : hidden;
position : relative;
}
#my-iframe
{
position : absolute;
top : -100px;
left : -100px;
width : 1280px;
height : 1200px;
}
Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.
这里有一个尺寸为 400x200px 的 DIV。现在通过在其中移动 IFRAME，您可以将其放置在正确的位置。
<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>
回答by Brian Smith
This can't be reliably done due to same origin policyand related iframe restrictions.
由于同源策略和相关的 iframe 限制，这无法可靠地完成。
.. the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy .. prevents access to most methods and properties across pages on different sites.
.. 同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略 .. 阻止跨不同站点上的页面访问大多数方法和属性。
If it was your website in your website [or a proxy to the target site] then JavaScript in the parent could modify the DOM or CSS of the embedded iframe as desired ..
如果它是您网站中的网站 [或目标网站的代理]，那么父级中的 JavaScript 可以根据需要修改嵌入式 iframe 的 DOM 或 CSS。
If the target website is willing to communicate data through another means (including XDR/XHR+CORS), then those could potentially be used as hack-a-bouts as well. However, there is no general solution for this task.
如果目标网站愿意通过其他方式（包括 XDR/XHR+ CORS）传递数据，那么这些也可能被用作黑客攻击。但是，此任务没有通用的解决方案。
Even jQuery.load(which uses XHR) is limited by the same origin policy:
Even jQuery.load（使用 XHR）受到同源策略的限制：
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
由于浏览器安全限制，大多数“Ajax”请求都遵循同源策略；请求无法从不同的域、子域或协议成功检索数据。
回答by Azzy
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 loadfunction to load the whole page and pluck out just the section you want:
作为替代方案，您可以使用一个简单的<div>并使用 jQueryload函数加载整个页面并仅提取您想要的部分：
$('#target-div').load('http://www.yahoo.com');
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.
您可能还需要做其他事情，一个显着的区别是内容将成为主页的一部分，而不是被隔离到单独的窗口中。
You won't be able to manipulate the URL to get only a portion of the page. So what you'll want to do is grab the page contents via the server-side language of your choice and then parse the HTML. From there you can grab the specific DIV you are looking for and then print that out to your screen. You could also use to remove unwanted content.
您将无法操纵 URL 来获取页面的一部分。因此，您要做的是通过您选择的服务器端语言获取页面内容，然后解析 HTML。从那里您可以获取您正在寻找的特定 DIV，然后将其打印到您的屏幕上。您还可以使用删除不需要的内容。
With PHP you could use file_get_contents()to read the file you want to parse and then use DOMDocumentto parse it and grab the DIV you want.
使用 PHP，您可以file_get_contents()读取要解析的文件，然后使用DOMDocument它来解析它并获取您想要的 DIV。
Here's the basic idea. This is untested but should point you in the right direction:
这是基本的想法。这是未经测试的，但应该为您指明正确的方向：
$page = file_get_contents('http://touch.facebook.com');
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
// Loop through the DIVs looking for one withan id of "content"
// Then echo out its contents (pardon the pun)
if ($div->getAttribute('id') === 'content') {
echo $div->nodeValue;
}
}
