( 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% なので )
|
|
【ブックマークレットの最新記事】
- 階層を指定して Googleのドメイン内検索を実行
- Seesaa ブログの『カテゴリ』をソートするブックマークレット
- Google Chrome でイラストAC のタグをコピー可能にするブックマークレット
- 選択した文字列を Google 翻訳で翻訳するブックマークレット( 選択が無い場合はページごと翻訳 ) / 3年半でだいぶ結果が変わってます
- ドメイン内 Google 検索 : 表示しているサイトで Google 検索を実行するブックマークレット
- Seesaa ブログの通常エディタで記事の先頭に Twitter カード用の meta 要素を挿入するブックマークレット
- jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット
- ブックマークレット : Googleのドメイン内検索を任意のページで実行
- JavaScript : ページのリンクのターゲットを全て name_window という名前に変更して、リンクを開く先を全て同じウィンドウにしてしまうブックマークレット
- ブラウザ上で選択した文字列で Google 検索するブックマークレット
- JavaScript : ブックマークレット雛型を使ったサンプル( そのページを１回転させる )
- JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
- ページを逆立ちさせるブックマークレット
- アドレスバーに表示した URL を、ダウンロードできるリンクを作成するブックマークレット( 動画等、そのままではダウンロードできない場合にとても有効です )
- Firefox 専用ブックマークレット : フォーカス位置のSELECT要素の選択されたテキストの取得
- JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法
