0

私は本当にリファレンスもサンプルコードも持っていません(Google & SOで検索)。
適切なキーワードが見つからないだけかもしれません。

これはCSSで解決できる/解決しなければならないと信じていますが、それに関する私のスキルは最小限です...

つまり、 iframeのピクセル数を「トリミング
」し たいのです。 最初は上と下だけど、ねえ、頼むなら左右も :o)

[更新]
私が本当にしたいのは、「概念実証」または少なくとも遊ぶための開始コードです...

[デビッドの答えによると、概念は証明されました] 

<!DOCTYPE html>
<html>
<head><title>iframe cropping</title>
    <style type="text/css">
    <!-- 
    #iframeparent{width:700px;height:700px;}
    iframe{margin-top:-40px;width:700px;height:700px;overflow:hidden;border:0px;}
    #iframe-crop{position:absolute;top:0;left:0;border-top:55px solid white;width:710px;height:640px;pointer-events:none;}
    -->
    </style> 
</head>
<body>
    <div id="iframeparent">
        <iframe src="http://docs.google.com/viewer?url=http://www.startupgreece.gov.gr/sites/default/files/geek_agreement_v1.2.pdf"></iframe>
        <div id="iframe-crop"></div>
    </div>
</body>
</html>
4

1 に答える 1

1

白い (またはサイトの背景色に関係なく) 境界線を持つブロックを iframe のすぐ上に配置し、トリミングする量に基づいて各境界線のサイズを調整します。これを行う最も簡単な方法は、相対的に配置された（またはとにかく静的ではない）親要素にiframeを配置し、その親要素内にもクロッピング境界線を含むブロックを配置し、top: 0およびに絶対配置することleft: 0です。クロッピング ブロックは、iframe と同じサイズにする必要があります (iframe には専用のサイズがありますか?)。

編集：試してみたところ、トリミングオーバーレイがすべてのイベントを「吸収」するため、これによりiframeとのすべての対話が無効になることがわかりました（当たり前！）。それでよろしければ、いいです。そうでない場合は、CSS プロパティを試すことができますがpointer-events:none;、これはすべてのブラウザーで機能するとは限りません。Firefox、Chrome、IE の最新バージョンで動作しますが、すべての人がすべての最新バージョンを使用しているわけではありません。

デモ: http://www.dstrout.net/pub/iframe-crop.htm

于 2012-05-14T01:13:16.987 に答える