ブログ本文のHTMLにJavaScriptのサンプルコードを書き、それを読み込んでJavaScriptを実行する方法のメモ

JavaScript jQuery

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(/&lt;/g, "<").replace(/&gt;/g, ">")
        .replace(/&amp;/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();

});
  • シンプルだなぁ。