13

我希望只将网站的一小部分放入 iframe。我该怎么做？通常当我为一个网站（比如说雅虎）设置一个 iframe 时，它​​会获取整个网站......假设我只想要网站的一小部分，我该怎么做？

是否可以在网站的 iframe 上设置边距？

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

先谢谢了

4

3 回答 3

27

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

您可以将 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>
于 2013-01-02T06:51:01.147 回答
1

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

.. 同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略.. 阻止访问不同站点上跨页面的大多数方法和属性。

如果它是您网站中的网站 [或目标网站的代理]，则父级中的 JavaScript 可以根据需要修改嵌入式 iframe 的 DOM 或 CSS ..

如果目标网站愿意通过其他方式（包括 XDR/XHR+ CORS）传递数据，那么这些方式也可能被用作 hack-a-bouts。然而，这个任务没有通用的解决方案。

甚至jQuery.load（使用 XHR）也受到同源策略的限制：

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

于 2013-01-02T06:41:19.780 回答
0

An<iframe>为您提供了一个完整的窗口来使用。做你想做的最直接的方法是让你的服务器给你一个完整的页面，只包含你想要显示的片段。

作为替代方案，您可以只使用一个简单的<div>并使用 jQueryload函数来加载整个页面并仅提取您想要的部分：

$('#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;
    }
}
于 2013-01-02T06:31:48.157 回答