html - iFrame - Web ページの上部を除外するにはどうすればよいですか?

Question

iFrame に表示される情報をフィルタリングするにはどうすればよいですか?

現在、iframe atm で予定されているのは次のとおりです。

しかし、私はそれをフィルタリングしたいです。

?

Answer 1

ドメインが異なる場合、iFrame のコンテンツを操作することはできません。これについては、こちらと関連する多くの質問を参照してください。これらは通常、Javascript を使用してコンテンツを変更することを中心にしていますが、CSS にも同じ制限が適用されます。

これらが同じドメインにある場合は、このような回答を使用して Javascript で実行できます。

ドメインにない場合は、いくつかの解決策から選択できます。最初のものは、HTMLiFrameがページの一番上にある場合、または画像のように iFrame の上部を別の要素の後ろに隠している場合に機能します。こちらの JSFiddle で確認してください。CSSmarginoverflow: hidden;

HTML:

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

CSS:

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

Though the scrolling="no" attribute isn't HTML5-valid, it's necessary to get rid of the bars in Chrome, as far as I know.

The second solution involves loading your external page internally, then pointing to that page. This gives you full control over the contents and styling of the page you're loading. You can do this with a number of languages, but I'll post how you'd do it with PHP.

Firstly, point your iFrame to a page on your domain, where you'll place the content.

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

Then in local-content.php, you begin by loading the target HTML file into a DOMDocument.

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

Then you modify it all you want using the PHP DOM functions. An example would be adding a stylesheet to it:

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

Add that to the head of your page:

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

次に、もちろん、すべてを出力します。

echo $dom->saveHTML();

Answer 2

<iframe>これは一種のキャンバスまたは src url がレンダリングされる webview内のコンテンツにアクセスできないと思います。外部ソースによってレンダリングされるコンテンツをフィルタリングまたは変更することはできません。