JQueryで、外部サイトを背景に読み込む
背景に外部サイトを読み込みたいなぁ。っていうのを考えていて、
Displaying source code with Ajax
っていうJQueryプラグインを見つけました。
ただ、これはリンクをクリックしたら読み込む、っていう感じで、僕がやりたかったのは、ずっと背景に読み込まれていて、外部サイトとは気づかない、っていうやつでした。
なので、ちょっとカスタマイズというか、
結局プラグイン使わずにできました。
<script type="text/javascript"> $(function(){ $('a.importSite').each( function(){ $(this).after('<iframe class="importSite" src='+this.href+'></iframe>'); } ); }); </script>
背景いっぱいに表示するためのCSS
iframe.importSite { position:absolute; top:0px; left:0px; width: 100%; height:100%; z-index:999; }
HTMLにはアンカーリンクでhrefに読み込みたいサイトのURLを指定。
<a href="読み込みたいURL" class="importSite"></a>
っていう感じです。