2011-08-24 18 views
6

iframeを使用してウェブサイトにページのコンテンツを表示したいのですが、ナビゲーションバーを残してページのヘッダー(上部)部分を「切り取る」必要がありますユーザーはその下にあるものだけを見ることができます。iframeのsrcコンテンツの一部を切り捨てます

コード:

<div id="content"> 
    <div style="height:800px;"> 
     <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="auto" 
      frameborder="0" height="100%" width="100%"></iframe> 
    </div> 
</div> 

私はこれをやって行くことができるいくつかの方法は何ですか? Tyvm〜

+0

http://stackoverflow.com/questions/5676672/how-do-i-crop-the-contents-of-an-をiframe-to-a-page-part-of-a-page あなたが望んでいた答えは – pashute

答えて

13

私はCSS clip属性使用してそれを行う方法を考え出し:

<div id="content"> 
    <div style="height:800px;"> 
     <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="no" 
      frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect(190px,1100px,800px,250px); 
      top:-160px; left:-160px;"></iframe> 
    </div> 
</div> 
+1

これは、ページの上部と下部にうまくいくようですが、ブラウザウィンドウのサイズを変更すると幅方向に変化しません...(IE8でテストしていますので、 – DaveRandom

+0

確かに、私はウィンドウのサイズを変更しようとしていないし、今すぐFFでやっている。IEで表示されていないので、いくつかの調整を加えている。あなたの入力のためにありがとうございます。 –

+0

クリップはネガティブトップがあなたに何をもたらしますか? – httpete

0

ナビゲーションバーのコンテナにidがある場合は、javacriptでその参照を取得してからparentNode.removeChild()を呼び出してください。これは、ページがiframe内で変更されるたびにnavバーが1秒間点滅する可能性が高いことを意味します。

また、iframeの読み込みをサーバーサイドスクリプトに渡して、読み込んだナビゲーションバーのHTMLを取り除いて結果を出力することもできます。これはおそらく、ページとのユーザーのやり取りを遅くすることになります。なぜなら、効果的にすべてを2回ロードする必要があるからです。このアプローチをとる場合は、おそらくCSS/JSを壊さないように<base>タグを追加する必要があります。

+0

です。私は最初にatmを提案しようとしています。私はもっ​​と簡単な解決策を望んでいました。何かdivやスタイルや何かを使ってiframe自体をクリップするようなもの –

+0

@ Shredderページがフレーム内の正しい位置にあることを保証するスクロールバーを使用しないで実用的な方法を考えることはできませんあなたが望むコンテンツを見ることができます。私はちょうど最初のアイデアを試みたし、iframeのページがあなたのドメインからロードされていないときに、ブラウザが 'contentWindow.document'へのアクセスを無効にするため動作しません。私が考えることができる、または見つけることのできる仕事はありません。唯一のオプションは私が思うプロキシスクリプトです... – DaveRandom

+1

私はそれを理解しました<_ <;私の答えを確認してください –

関連する問題