iFrame -如何过滤掉网页的顶部？

Question

如何过滤iFrame中出现的信息？

目前，在我的iframe自动取款机中出现的是；

​

​

但我想把它过滤成；

​

​

Answer 1

如果域不同，您就不能对iFrame内容做任何事情，因为您可以看到here和许多相关问题。虽然这些通常以使用Javascript修改内容为中心，但同样的限制也适用于CSS。

如果它们在同一个域上，您可以使用answers like this通过Javascript来完成此操作。

如果它不在您的域中，有一些解决方案可供您选择。第一种方法是HTML和CSS，如果iFrame位于页面的最顶部，或者如果您将iFrame的顶部隐藏在另一个元素后面，如图像，则可以使用负数margin和overflow: hidden;来隐藏滚动条。在JSFiddle here上查看它。

HTML：

<iframe src="http://sbc.swarthmore.edu" scrolling="no">​

CSS：

iframe {
    width: 600px;
    height: 500px;
    overflow: hidden;
    margin-top: -50px;
}​

虽然scrolling="no"属性不是HTML5-valid，但据我所知，有必要去掉Chrome中的条形图。

第二种解决方案涉及在内部加载外部页面，然后指向该页面。这使您可以完全控制正在加载的页面的内容和样式。你可以用很多种语言来做到这一点，但我会把你是如何用PHP做到这一点的。

首先，将您的iFrame指向您的域上的一个页面，您将在其中放置内容。

<iframe src="local-content.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

然后在local-content.php中，首先将目标HTML文件加载到DOMDocument中。

$dom = new DOMDocument;
$dom->loadHTMLfile("http://www.external-site.com/the-page.html");

然后，您可以使用PHP DOM functions对其进行修改。例如，向其中添加一个样式表：

$our_css_url = "static/css/style.css";
$element = $dom->createElement('link');
$element->setAttribute('type', 'text/css');
$element->setAttribute('rel', 'stylesheet');
$element->setAttribute('href', $our_css_url);

将其添加到页面的head中：

$head = $dom->getElementsByTagName('head')->item(0);
$head->appendChild($element);

然后，当然，您可以输出整个内容：

echo $dom->saveHTML();

Answer 2

我不认为你可以访问<iframe>中的内容，这是一种画布或webview，其中将呈现src url。您不能过滤或修改由外部源呈现的内容。