ウェブサイトのごく一部だけをiframeに入れたいと思っています。どうすればいいですか?通常、Webサイト(yahooなど)にiframeを設定すると、Webサイト全体が取得されます... Webサイトのごく一部だけが必要だったとしましょう。これを行うにはどうすればよいですか?
ウェブサイトのiframeにマージンを付けることは可能ですか?
ウェブサイトにiframeを配置したいと思っています。(それが理にかなっている場合)
よろしくお願いします:D
ほとんどの場合、参照は外部であり、外部ページを制御することはできません。したがって、IFRAMEコンテンツを目的の位置までスクロールする必要があります。もちろんこれは不可能です。ええ、いくつかのJavaScriptハックがありますが、スクロールはページがロードされた後にのみ発生するため、それらはすべて悪い解決策です。ソリューション
IFRAMEをdivにラップし、絶対TOPおよびLEFTCSSプロパティを使用して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>
同一生成元ポリシーと関連するiframeの制限により、これを確実に行うことはできません。
..同一生成元ポリシーは、JavaScriptなどの多くのブラウザ側プログラミング言語にとって重要なセキュリティ概念です。ポリシー..異なるサイトのページ間でほとんどのメソッドとプロパティにアクセスできないようにします。
それがあなたのウェブサイトのあなたのウェブサイト[またはターゲットサイトへのプロキシ]である場合、親のJavaScriptは、必要に応じて、埋め込まれたiframeのDOMまたはCSSを変更できます。
ターゲットWebサイトが別の手段(XDR / XHR + CORSを含む)を介してデータを通信することをいとわない場合、それらはハックアバウトとしても使用される可能性があります。ただし、このタスクの一般的な解決策はありません。
jQuery.load
(XHRを使用する)偶数は、同一生成元ポリシーによって制限されます:
ブラウザのセキュリティ制限により、ほとんどの「Ajax」リクエストには同一生成元ポリシーが適用されます。リクエストは、別のドメイン、サブドメイン、またはプロトコルからデータを正常に取得できません。
は、作業する<iframe>
ための完全なウィンドウを提供します。必要なことを行う最も直接的な方法は、表示したいフラグメントのみを含む完全なページをサーバーに提供させることです。
別の方法として、単純な<div>
ものを使用し、jQueryload
関数を使用してページ全体をロードし、必要なセクションだけを抽出することもできます。
$('#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;
}
}