2008-09-15 17 views
2

Googleリーダーでは、ブックマークレットを使用して、訪れているページに「メモ」することができます。ブックマークレットを押すと、現在のページの上に小さなGoogleフォームが表示されます。フォームでは、説明などを入力できます。Submitを押すと、フォームはページを離れずに送信され、フォームは消えます。全体的に、非常に滑らかな経験。ブックマークレットを使用してサイトのページにフォームを表示するにはどうすればいいですか?

私は明らかにそれがどのように行われたかを見ようとしましたが、最も興味深い部分は小さくなって読めません。だから...

(ブラウザ側で)これを実装する方法に関するアイデアはありますか?どのような問題がありますか?これを説明している既存のブログ投稿ですか?

答えて

3

オーパジョは正しいです。しかし、私は私たちのサイト(www.iminta.com)を手がけたブックマークレットのフレームワークに向けて指摘します。

次のようにブックマークレット自体が読み取ります

javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://www.iminta.com/javascripts/new_bookmarklet.js?noCache='+new%20Date().getTime());document.body.appendChild(e)})()) 

これだけで、このファイルが含ま文書に新しいスクリプトを注入:それはブックマークレットを作成していることに注意することが重要です

http://www.iminta.com/javascripts/new_bookmarklet.js

をiframeを配置し、ドキュメントにイベントを追加して、ユーザーがヒットエスケープ(ウィンドウを閉じる)やスクロール(表示できるように)などの操作を行うことを許可します。また、zポジショニング(例えば、フラッシュ)でうまく動かない要素も隠します。最後に、iframe内で実行されているjavascriptとのやりとりを容易にします。このように、iframeに親ドキュメントにiframeを削除するように指示する閉じるボタンを付けることができます。この種のクロスドメインのものはちょっとハッキリですが、これを行う方法は(私が見てきた)唯一の方法です。

ハートの心配はありません。 JavaScriptがうまくいかない場合は、苦闘する準備をしてください。

+0

ありがとう、それは、私が最初に必要としなかったiframeと(私が問題を抱えていた)フラッシュとZ-インデックスを扱う優れた答えです。 インラインCSSも使用していることがわかりました。これは問題がありました。 – jplindstrom

0

非常に基本的なレベルでは、createElementを使用してページに挿入する要素を作成し、appendChildまたはinsertBeforeをページに挿入します。

0

< >タグを追加すると簡単なブックマークレットを使用して、必要な要素をDOMにプッシュしてユーザーにモーダルウィンドウを表示できる外部JavaScriptファイルを読み込むことができます。フォームはAJAXリクエストを介して送信され、サーバー側で処理され、成功するか、ユーザーが修正する必要があるエラーの一覧が返されます。

ので、ブックマークレットは、次のようになります。

のjavascript:コード・ツー・アドオンスクリプトタグと-のinit-スクリプト。

外部スクリプトが含まれます:

  • DOM
  • ようにその要素のユーザーに表示するマークアップをinnerHTMLプロパティを更新する機能に要素を追加する機能を
  • AJAXフォーム処理の処理

CSS効果でウィンドウ効果を実現できます。

この特定のタスクの1つの完全なリソースとして、あなたは何かを見つけるのはかなり幸運でしょう。しかし、小さな部品を見てみると、豊富なリソースを見つけることができます。モーダルウィンドウ、DOMへの要素の追加、AJAX処理に関する情報を見てみましょう。

関連する問題