ジント兄さんのテストブログ

ジント兄さんがFC2ブログのカスタマイズを練習するために作ったブログです。

カテゴリ別のリンクを探している方、どんな記事があるかをもれなく把握したい方は、記事一覧のページをご覧になってください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スタイルをテストのブックマークレットをIE対応してみた

bookmarklet.daa.jpさんが紹介しているbookmarkletの中に「スタイルをテスト」というものがあって、これをずっと愛用しているのですが、Internet Explorerで使えないと色々な人にオススメしづらいので、自分なりに書き直してみました。

以下のリンクをクリックすると発動するJavaScriptによって別窓が開くので、そこにCSSのコード、たとえば*{color:red;}とか入力すると即座にページに反映される便利なやつです。リンクをブラウザのお気に入りに登録しておけば、好きなページで発動できます。

(function(){
  function init(){
    var obj = {};
    obj.parentWindow = window.opener;
    obj.textarea = document.forms[0].elements[0];
    obj.link = obj.parentWindow.document.createElement('link');
    obj.link.rel = 'stylesheet';
    obj.parentWindow.document.getElementsByTagName('head')[0].appendChild(obj.link);
    update(obj);
  }
  function update(obj){
    if (obj.parentWindow.closed) {
      obj.textarea.style.backgroundColor = '#ddd';
      return;
    }
    obj.link.href = 'data:text/css,' + escape(obj.textarea.value);
    setTimeout(function(){update(obj);}, 500);
  }
  var childWindow = window.open('', '', 'resizable,width=500,height=300');
  childWindow.document.write(returnHTML());
  childWindow.document.close();
  function returnHTML() {
    var str = '<title>CSS TESTER</title>';
    str += '<style>*{width:100%;height:100%;border:0;margin:0;padding:0;}</style>';
    str += '<form><textarea></textarea></form>';
    str += '<script>'+update+init+'init();<\/script>';
    return str;
  }
})();

追記(2013年12月8日)

昨日のやつは、元のブックマークレットのよく理解できていないところを無視して書き直したものなので、そのせいでページ遷移しても引き続き小窓が機能するための部分が抜け落ちていた。なので、ページ遷移しても小窓が機能するようにした。

(function(){
  function init() {
    var obj = {};
    obj.parentWindow = window.opener;
    obj.textarea = document.forms[0].elements[0];
    obj = append(obj);
    update(obj);
  }
  function append(obj) {
    var pW = obj.parentWindow, d = pW.document;
    obj.link = d.createElement('link');
    obj.link.rel = 'stylesheet';
    d.getElementsByTagName('head')[0].appendChild(obj.link);
    pW.hasLink = obj.link;
    return obj;
  }
  function update(obj) {
    var pW = obj.parentWindow;
    if (pW.closed) {
      obj.textarea.style.backgroundColor = '#ddd';
      return;
    }
    if (!pW.hasLink) {
      obj = append(obj);
    }
    obj.link.href = 'data:text/css,' + escape(obj.textarea.value);
    setTimeout(function(){update(obj);}, 500);
  }
  var childDocument = (window.open('', '', 'resizable,width=500,height=300')).document;
  childDocument.write(returnHTML());
  childDocument.close();
  function returnHTML() {
    var str = '<title>CSS TESTER</title>';
    str += '<style>*{width:100%;height:100%;border:0;margin:0;padding:0;}</style>';
    str += '<form><textarea></textarea></form>';
    str += '<script>'+update+append+init+'init();<\/script>';
    return str;
  }
})();

コメント

0: ジント兄さん
メッセージをどうぞ。

トラックバック

この記事のトラックバックURL:http://jislotz.blog.fc2.com/tb.php/6-f80c4c54

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。