主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

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>

っていう感じです。