ブックマークレット (Google Reader の Note など) を使用してサイトのページにフォームを表示するにはどうすればよいですか?

Question

Google Reader では、ブックマークレットを使用して、アクセスしているページを「メモ」することができます。ブックマークレットを押すと、現在のページの上部に小さな Google フォームが表示されます。フォームには説明などを入力できます。[送信] を押すと、フォームはページを離れることなく自動的に送信され、その後フォームが消えます。全体として、非常にスムーズな体験でした。

もちろん、それがどのように行われるかを調べようとしましたが、最も興味深い部分は縮小されていて読めません。それで...

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

Answer 1

オパジョはそれが正しい。ただし、私がサイト (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 が苦手な方は、苦労することを覚悟してください。

Answer 2

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

Answer 3

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

したがって、ブックマークレットは次のようになります。

javascript:スクリプトタグを追加してスクリプトを初期化するコード;

外部スクリプトには次のものが含まれます。

• DOM に要素を追加する機能
• ユーザーに表示したいマークアップになるようにその要素の innerHTML を更新する機能
• AJAXフォーム処理の扱い

ウィンドウ効果は CSS の配置によって実現できます。

この特定のタスクのための完全なリソースが 1 つある場合、何かを見つけることができれば非常に幸運です。ただし、より小さな個々の部品に目を向けると、豊富なリソースが見つかります。モーダル ウィンドウ、DOM への要素の追加、および AJAX 処理に関する情報を調べてください。