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

Question

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

目前我的iframe atm中出现的是什么;

但我想过滤它;

？

Answer 1

你不能使用iframe的内容做任何事情,如果域是不同的,因为你可以看到这里,并就一些相关问题.虽然这些通常以使用Javascript来修改内容为中心,但同样的限制适用于CSS.

如果它们位于同一个域中,您可以使用Javascript使用这样的答案来完成.

如果它不在您的域中,您可以选择一些解决方案.第一个就是HTML和CSS和工作,如果iframe是在你的页面的最顶端,或者如果你躲在另一个元素,如图像iFrame的顶部:你可以使用负margin和overflow: hidden;隐藏滚动条.在这里查看JSFiddle.

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函数修改它.一个例子是向它添加样式表:

$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();