web-dev-qa-db-ja.com

Webサイトの特定のセクションのみをiframeに配置するにはどうすればよいですか？

ウェブサイトのごく一部のみをiframeに配置したいと考えています。どうすればいいですか？通常、Webサイトのiframeを設定するとき（yahooと言う）、Webサイト全体を取得します。

ウェブサイトのiframeにマージンを入れることは可能ですか？

ウェブサイトのiframeを自分のウェブサイトに配置したいと考えています。 （それが理にかなっている場合）

事前に感謝：D

htmlwordpressiframe
9
Brian Smith

ほとんどの場合、参照は外部であり、外部ページを制御することはできません。したがって、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が1つあります。 IFRAMEをその中に移動すると、適切な場所に配置できます。

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

同じOriginポリシー および関連するiframeの制限により、これを確実に行うことはできません。

..同じOriginポリシーは、JavaScriptなどの多くのブラウザ側プログラミング言語にとって重要なセキュリティ概念です。 ポリシー..は、異なるサイトのページ全体のほとんどのメソッドとプロパティへのアクセスを禁止します。

WebサイトのWebサイト（またはターゲットサイトのプロキシ）の場合、親のJavaScriptは、必要に応じて埋め込みiframeのDOMまたはCSSを変更できます。

ターゲットWebサイトが別の手段（XDR/XHR + [〜＃〜] cors [〜＃〜] を含む）を介してデータをやり取りする意思がある場合、それらは潜在的なハックとして使用される可能性があります上手。ただし、このタスクの一般的な解決策はありません。

偶数 jQuery.load （XHRを使用）は、同じOriginポリシーによって制限されます。

ブラウザのセキュリティ制限のため、ほとんどの「Ajax」リクエストは同じOriginポリシーの対象となります。要求は、異なるドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。

1
user166390

_<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;
    }
}
_
0
Azzy