iFrame - 我将如何过滤掉网页的顶部？答案

【问题标题】：iFrame - how would I filter out the top of a webpage?iFrame - 我将如何过滤掉网页的顶部？
【发布时间】：2012-11-07 22:30:32
【问题描述】：

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

目前在我的 iframe atm 中出现的是；

但我想将其过滤到；

【问题讨论】：

您能解释一下这些 iframe 是如何使用的或给出一个代码示例吗？
什么都不懂，你问的是那个javascript吗？

标签： html css iframe positioning

【解决方案1】：

如果域不同，您将无法对 iFrame 内容执行任何操作，如您可以看到 here 和许多相关问题。尽管这些通常以使用 Javascript 修改内容为中心，但同样的限制也适用于 CSS。

如果它们在同一个域中，您可以使用 Javascript 使用 answers like this。

如果它不在您的域中，您可以选择一些解决方案。第一个只是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();

【讨论】：

css 没用：/而且我不知道如何编码/使用 php
第一个解决方案仅在 iFrame 位于页面顶部时才有效（我在解决方案中以斜体字注明了这一点）。否则我能想到的最好的方法是 PHP 目前的解决方案，假设 iFrame 的来源是外部的。
css 的东西确实有效，但它的位置看起来非常怪诞和不专业:( 无论如何谢谢

【解决方案2】：

我认为您无法访问 <iframe> 内的内容，这是一种画布或将呈现 src url 的 web 视图。您不能过滤或修改由外部源呈现的内容。

【讨论】：

所以你不能通过定位让它过滤掉顶部？
过滤掉是什么意思？是否要隐藏 iframe 中显示区域的部分？
如果是这种情况，您可以使用 css 实现...在 -ve 值中使用一些 margin-top 字段...这将有所帮助