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は解像度が機種によって多様だったりで難しいのかも。
関連記事
-
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
jQueryにて指定した要素を検索条件から除外するnot()の利用方法
あるソースコードを拝見しているとjQueryでnot()という使ったことの無いメ ...
-
-
jQueryで特定のdata属性をセレクタとして指定する方法
jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...