ブログ本文のHTMLにJavaScriptのサンプルコードを書き、それを読み込んでJavaScriptを実行する方法のメモ
jQueryのAPIを眺めてて、「そういえばこのサンプルで実行するiframe、実際にファイルがあるのかな?それともJavaScriptで動的に作ってるのかな?」と思って確認したのでメモメモ。
確認してみたらやっぱりJavaScriptで動的にiframe作ってるみたいですね。
(サンプルコードのhtmlをいくつも作るの大変だから当たり前なのかしら?)
たまにブログとかにJavaScriptのサンプルコードを書いてそれを実行したくなるときがあるのでその時用。ブログのプレビューとかも最近こうやってるiframe動的に作ってるんでしょうねぇ。
方法
- <code class="demo-code">っていうタグを用意してその中にJavaScriptのコードを記述
- id指定ではなく、class指定なのは複数のコードを実行したいとき用ですよね
- 出力結果を入れる空div、<div class="code-demo"><div>を作る
- あとは、jQueryで使っているJavaScriptを実行すればよし
jQueryで使ってるJavaScriptのソース全文
$("code.demo-code").each(function(index) { var $example = $(this), $demo = $('div.code-demo').eq(index); var source = $example.html() .replace(/<\/?a.*?>/ig, "") .replace(/<\/?strong.*?>/ig, "") .replace(/</g, "<").replace(/>/g, ">") .replace(/&/g, "&"); var iframe = document.createElement("iframe"); iframe.src = "/index-blank.html"; iframe.width = "100%"; iframe.height = $demo.attr("rel") || "125"; iframe.style.border = "none"; $demo.html(iframe); var doc = iframe.contentDocument || iframe.contentWindow.document; source = source .replace(/<script>([^<])/g,"<script>window.onload = (function(){\ntry{$1") .replace(/([^>])<\/sc/g, '$1\n}catch(e){}});</sc'); source = source .replace("</head>", "<style>html,body{border:0; margin:0; padding:0;}</style></head>"); doc.open(); doc.write( source ); doc.close(); });
- シンプルだなぁ。