你如何只将网站的某个部分放入iframe?

时间:2013-01-02 06:27:45

标签: html wordpress iframe

我希望将网站的一小部分放入iframe中。我该怎么做?通常当我为一个网站设置一个iframe(比方说雅虎)时,它会获得整个网站...让我说我只想要一小部分网站,我该怎么做?

是否可以将边距放在网站的iframe上?

我希望在我的网站上放一个网站的iframe。 (如果这是有道理的)

提前致谢:D

4 个答案:

答案 0 :(得分:24)

在大多数情况下,引用是外部的,您无法控制外部页面。因此,您必须将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;
}

这里有一个尺寸为400x200px的DIV。现在通过移动IFRAME,您可以将它放在正确的位置。

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

答案 1 :(得分:1)

由于same origin policy和相关的iframe限制,这无法可靠地完成。

  

..同源策略是许多浏览器端编程语言(如JavaScript)的重要安全概念。 政策..阻止访问不同网站上的网页上的大多数方法和属性

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

如果目标网站愿意通过其他方式(包括XDR / XHR + CORS)传播数据,那么这些也可能被用作黑客攻击。但是,这项任务没有通用的解决方案。

即使jQuery.load(使用XHR)也受到相同原始政策的限制:

  

由于浏览器安全限制,大多数“Ajax”请求受同源策略的约束;请求无法成功从其他域,子域或协议中检索数据。

答案 2 :(得分:0)

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

答案 3 :(得分:-3)

<iframe>加载完整网站的另一种方式是一种简单的方法

<iframe src="http://site.com/#content"></iframe> 

其中#content是需要显示的内容divs id