iPhoneにホーム画面登録を促すダイアログを表示
2024/01/13
スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれども、ホーム画面登録を促すダイアログなら「Mobile Bookmark Bubble」というライブラリでいけるみたい。
Mobile Bookmark Bubble
https://code.google.com/p/mobile-bookmark-bubble/source/browse/
※zipのところでダウンロード出来る。
使い方
bookmark_bubble.jsを読み込む。あと、ホーム画面用の画像を用意して以下で呼び出しておく。
<link rel="apple-touch-icon-precomposed" href="ホーム画面用の画像" />
呼び出したいページで以下を記述する。
window.addEventListener('load', function() { window.setTimeout(function() { var bubble = new google.bookmarkbubble.Bubble(); //var parameter = 'bmb=1'; var parameter = '#'; bubble.hasHashParameter = function() { //return window.location.hash.indexOf(parameter) != -1; return location.hash == "" && location.href.indexOf(parameter) == location.href.length-1; }; bubble.setHashParameter = function() { if (!this.hasHashParameter()) { //window.location.hash = parameter; location.href = parameter; } }; bubble.getViewportHeight = function() { window.console.log('Example of how to override getViewportHeight.'); return window.innerHeight; }; bubble.getViewportScrollY = function() { window.console.log('Example of how to override getViewportScrollY.'); return window.pageYOffset; }; bubble.registerScrollHandler = function(handler) { window.console.log('Example of how to override registerScrollHandler.'); window.addEventListener('scroll', handler, false); }; bubble.deregisterScrollHandler = function(handler) { window.console.log('Example of how to override deregisterScrollHandler.'); window.removeEventListener('scroll', handler, false); }; bubble.showIfAllowed(); }, 1000); }, false);
参考サイト
http://d.hatena.ne.jp/a_kimura/20110507/1304801259
その他
残念ながらAndroidは対応してないみたい。あとAndroidは解像度が機種によって多様だったりで難しいのかも。
関連記事
-
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
-
JavScriptでalertを閉じた後にページ遷移させる方法
JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...
-
-
aタグにてhref属性の「javascript:void(0);」の代替手段について
aタグにJavaScriptやjQueryでイベントを割り当てたい場合、href ...
-
-
PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法
PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...