( Chrome と Firefox と IE で動作確認しました )
IE は、関数のデフォルト記述をできないので、scale_start の呼び出しに必ず引数が必要です。もし省略による値設定が必要な場合は、arguments.length と arguments[0] が必要になると思います 拡大する場合は、 transformOrigin を実行しておかないと、ページの中央にで拡大されてしまって左端が見えなくなります( デフォルトが 50% 50% なので )縮小だけならばブラウザの縮小で対応できますが、ブラウザの場合元に戻すのが少し面倒なので、リロードで100% に戻せます。 1回目は外部 JavaScript の中のデフォルトとして 50% で縮小し、2回目は 80% で縮小するようにしました。 80% の指定は、ブックマークレットのコードの最後にある 0.8 を変更すると自由にカスタマイズできます。 リンクの href に埋め込まれたコード
javascript:if(!window['_bIScale']){window._bIScale={};(function(w,h,b,l,t,z,v){var wnd=document.createElement('iframe');with(wnd){id='myScale';frameBorder=b;width=w;height=h;with(style){position='absolute';left=l;top=t;zIndex=z;display=v;border='solid 1px #000';borderRadius='10px';}}document.body.appendChild(wnd);window._bIScale.wnd=wnd;var%20url;url='https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js';wnd.contentWindow.document.write('<'+'script src=\''+url+'\' charset=\'utf-8\'></'+'script>');})(0,600,1,'0px','0px',1000,'');}else{document.getElementById('myScale').contentWindow.scale_start(0.8);}
整形したコード
javascript: if (!window['_bIScale']) { window._bIScale = {}; (function(w, h, b, l, t, z, v) { var wnd = document.createElement('iframe'); with(wnd) { id = 'myScale'; frameBorder = b; width = w; height = h; with(style) { position = 'absolute'; left = l; top = t; zIndex = z; display = v; border = 'solid 1px #000'; borderRadius = '10px'; } } document.body.appendChild(wnd); window._bIScale.wnd = wnd; var % 20url; url = 'https://lightbox.sakura.ne.jp/toolbox/jquery_scale.js'; wnd.contentWindow.document.write('<' + 'script src=''+url+'' charset='utf - 8 '></' + 'script>'); })(0, 600, 1, '0px', '0px', 1000, ''); } else { document.getElementById('myScale').contentWindow.scale_start(0.8); }
ブックマークレットに関する記事
関連する記事
▼ ブックマークレットから呼び出している js ファイルの内容
str=""; str+="<"+"script> \n"; str+="if ( window.addEventListener ) { \n"; str+=" window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; \n"; str+="} \n"; str+="else { \n"; str+=" window[window.location.hostname+'.loadjQuery'] = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; \n"; str+="} \n"; str+="document.write(\"<\"+\"script src=\\\"\" + window[window.location.hostname+'.loadjQuery'] + \"\\\"></\"+\"script>\"); \n"; str+="</"+"script> \n"; document.write(str); function scale_start(scale) { $(parent.document.body).css({ transformOrigin: '50% 0' }); $({"scale": 1}).animate( {"scale": scale}, { duration: 1000, easing: "swing", step: function(now) { $(parent.document.body).css({ transform: 'scale(' + now + ')' }); } } ); } str=""; str+="<"+"script> \n"; str+="scale_start(0.5); \n"; str+="</"+"script> \n"; document.write(str); document.close();
※ transformOrigin を実行しておかないと、ページの中央に向かって縮小されてしまいます( デフォルトが 50% 50% なので )
|
【ブックマークレットの最新記事】
- Seesaa ブログの『カテゴリ』をソートするブックマークレット
- Google Chrome でイラストAC のタグをコピー可能にするブックマークレット
- 選択した文字列を Google 翻訳で翻訳するブックマークレット( 選択が無い場合はページごと翻訳 ) / 3年半でだいぶ結果が変わってます
- ドメイン内 Google 検索 : 表示しているサイトで Google 検索を実行するブックマークレット
- Seesaa ブログの通常エディタで記事の先頭に Twitter カード用の meta 要素を挿入するブックマークレット
- jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット
- ブックマークレット : Googleのドメイン内検索を任意のページで実行
- JavaScript : ページのリンクのターゲットを全て name_window という名前に変更して、リンクを開く先を全て同じウィンドウにしてしまうブックマークレット
- ブラウザ上で選択した文字列で Google 検索するブックマークレット
- JavaScript : ブックマークレット雛型を使ったサンプル( そのページを1回転させる )
- JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
- ページを逆立ちさせるブックマークレット
- アドレスバーに表示した URL を、ダウンロードできるリンクを作成するブックマークレット( 動画等、そのままではダウンロードできない場合にとても有効です )
- Firefox 専用ブックマークレット : フォーカス位置のSELECT要素の選択されたテキストの取得
- JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法