5

私は次のようなことをしようとしています:

<a href="http://www.google.com">Google</a>

ユーザーがリンクにカーソルを合わせたとき:

<div id="display-site">

//working site contained in a div

</div>

<a>htmlを使用して新しいウィンドウでリンクを開くことができることに注意してください。タグに含まれるWebサイトをdivコンテナーで「プレビュー」する方法を理解することに興味があると思いました（リンクがホバーされている場合） ）。

4

4 に答える 4

9

これは、 の上にカーソルを置いて を iframe の属性としてロードする<iframe>ときに DOM でを作成することによって実行できます。ポップアップのように見せるには、 を絶対位置に配置し、そのCSS プロパティをページ コンテンツの残りの部分よりも高い値に設定する必要があります。<a>hrefsrc=<iframe>z-index

ただし、@Davidの回答で提案されているように、ズームレベルに対応するために一部の要素のサイズを変更するなど、ロードされたフレームの表示を変更する必要がある場合は、スクリプトが許可されないため、同じオリジンポリシーに違反する可能性があります同じドメイン外でロードされたフレームのプロパティにアクセスします。

MDN から:

フレームのコンテンツにアクセスしようとするスクリプトは、同一オリジン ポリシーの対象となり、別のドメインから読み込まれた場合、他のウィンドウ オブジェクトのほとんどのプロパティにアクセスできません。これは、親ウィンドウにアクセスしようとするフレーム内のスクリプトにも適用されます。クロスドメイン通信は window.postMessage で実現できます。

于 2012-06-24T18:01:21.840 に答える
3

続行する前に、これがユーザー エクスペリエンスに役立つことを確認してください。マウスをページ上に移動してハイパーリンクをブラッシングすると、常にリンクのプレビューが一番上に表示されるとは限りません。ただし、これがユーザーの最善の利益になると仮定すると...

実装に関しては、@Michael が示唆しているように、を使用してこれを行うことができますが<iframe>、iframe 内のドキュメントはユーザーが設定したズーム レベルで表示されますが、少なくとも 1024x768 用に設計されたドキュメントの 250x250 ウィンドウを表示することはできません。ユーザーを助けるために。したがって、ズームアウトした Web ページの鳥瞰図をユーザーに表示する必要があります。

現在のビューポートのズーム レベルを取得する方法はあります (最新のすべてのブラウザーでページのズーム レベルを検出するには?)。さらに、iframeごとにズームを設定できるとは思いません（すべてを設定できると仮定します）。

その場合の最善の方法は、縮小されたビットマップ ページ レンダリングをユーザーに表示することです。これは、Google が検索結果で人気のあるページに対して行っているようにです。ただし、これは、リンク先のページごとに、ターゲット ページのレンダリングされた画像を取得する必要があることを意味します。

数年前まではページ サムネイル サービスを提供する会社があったことを覚えています (これは、2005 年から 2008 年頃に人気があった、Web ページの二重下線付き広告テキストの一部でした)。

その後、独自のサービスをセットアップし、レイアウト エンジン (Gecko、WebKit、または Trident) をホストして、ページのサムネイルを生成できるようにする必要があると思います。

すべてを考慮すると、それだけの価値はないと思います。

于 2012-06-24T18:07:07.853 に答える
0

1- 要素のホバー時にツールチップを表示する jquery プラグインを見つけます。
2- リンクが参照する Web サイトの iframe を、ツールチップ コンテナー内にある div 内に挿入します。

于 2012-06-24T22:51:00.837 に答える
0

このようなもの、ただのアイデア

$('a').hover(function()
 {
    $('#display-site').load((this).attr('href'));
    $('#display-site').show();
 });

必要に応じて css プロパティを設定する必要があります

于 2012-06-24T18:10:11.407 に答える