如何将网站的特定部分放入iframe中？

Question

我想将网站的一个小部分放入 iframe 中，应该怎么做？通常情况下，当我为某个网站（比如雅虎）设置 iframe 时，它会获取整个网站... 假设我只想要一个小部分的网站，我应该怎么做？

是否可以在 iframe 上放置边距？

我希望在我的网站上放置一个其他网站的 iframe。（如果有意义的话）

提前感谢 ：D

- Brian Smith

Answer 1

在大多数情况下，引用是外部的，您无法控制外部页面。因此，您必须将IFRAME内容滚动到所需位置。当然，这是不可能的。是的，有一些JavaScript技巧，但它们都是糟糕的解决方案，因为只有在页面加载后滚动才会发生。

解决方案

您可以将IFRAME包装在一个DIV中，并使用绝对TOP和LEFT CSS属性滚动DIV内容。

以下是示例：

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

这里有一个尺寸为400x200像素的DIV。现在，通过移动其中的IFRAME，您可以将其定位在正确的位置。

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>

- Tahir Yasin

---

为什么它可以在www.example.com上运行，但是在https://www.marktplaats.nl上却不能？（即iframe是白色/未显示，没有错误显示，使iframe可滚动或更大并不会改变任何内容）。 - Michel Keijzers

Answer 2

由于同源策略和相关的iframe限制，这无法可靠地完成。

引用： 同源策略是一些浏览器端编程语言（如JavaScript）的重要安全概念。该策略防止跨站点页面访问大多数方法和属性。

如果是您自己网站内的内容（或代理到目标站点），则父级中的JavaScript可以根据需要修改嵌入式iframe的DOM或CSS。

如果目标网站愿意通过其他方式（包括XDR / XHR + CORS）通信数据，则也可以使用这些方式进行黑客攻击。然而，对于此任务没有通用解决方案。

即使jQuery.load（使用XHR），也受到同源策略的限制。

由于浏览器安全限制，大多数“Ajax”请求都受到“同源策略”的限制；即请求无法成功地从不同的域、子域或协议中检索数据。

- user166390

---

当我尝试缩小iframe时，它只会向网站的左上角缩小。假设我想要一个仅包含此帖子的iframe。如果我想要将iframe放在页面中间的某个位置而排除其他所有内容，该怎么办？ - Brian Smith

@BrianSmith 我不知道有没有不使用协调通讯的通用解决方案。但是，请查看 Tahir 的答案，它可能适合您 - 如果您的目标客户允许嵌入 iframe。（我不确定是否有任何限制。） - user166390

Answer 3

一个<iframe>可以给你一个完整的窗口来操作。最直接的方法是让你的服务器提供一个只包含你想要显示的片段的完整页面。

另一种选择是，你可以使用一个简单的<div>，并使用jQuery的load函数来加载整个页面，并仅获取你想要的部分：

$('#target-div').load('http://www.yahoo.com');

你可能需要做其他的事情，一个显著的区别是内容将成为主页面的一部分，而不是被隔离到一个单独的窗口中。

---

您无法通过操纵 URL 来获取页面中的部分内容。因此，您需要使用您选择的服务器端语言抓取页面内容，然后解析 HTML。从那里，您可以获取特定的 DIV 并将其打印到屏幕上。您也可以使用它来删除不想要的内容。

使用 PHP，您可以使用 file_get_contents() 读取要解析的文件，然后使用 DOMDocument 进行解析并获得您想要的 DIV。

这是基本思路。这未经测试，但应该指引您朝着正确的方向前进:

$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;
    }
}

- Azzy

---

当我尝试缩小iframe时，它只会向网站的左上角缩小。假设我想要一个仅包含此帖子的iframe。如果我想要将iframe放在页面中间的某个位置而排除其他所有内容，该怎么办？ - Brian Smith

嗨，这里的'id'和'content'是什么？ - Farhad Mammadli

旧答案，但还是被踩了，因为前半部分是另一个相关问题上的其他用户答案的复制粘贴，并没有提到其他问题或其他答案的参考。（其他答案：https://dev59.com/aHA75IYBdhLWcg3weZDu#3272151） - Ryan McCoy