2

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

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

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

4

3 に答える 3

3

Aupajo はその通りです。ただし、私がサイト ( www.iminta.com ) 用に作成したブックマークレット フレームワークを紹介します。

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

javascript:void((function(){
    var e=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 が苦手な方は、苦労する覚悟をしてください。

于 2008-09-16T00:06:00.380 に答える
0

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

于 2008-09-15T23:20:59.523 に答える
0

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

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

javascript:code-to-add-script-tag-and-init-the-script;

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

  • 要素を DOM に追加する機能
  • その要素の innerHTML を更新して、ユーザーに表示したいマークアップにする機能
  • AJAX フォーム処理のハンドリング

ウィンドウ効果は CSS ポジショニングで実現できます。

この特定のタスクの 1 つの完全なリソースについては、何かを見つけることができればかなり幸運です。しかし、より小さな個々のパーツを見てみると、多くのリソースが見つかります。モーダル ウィンドウ、DOM への要素の追加、および AJAX 処理に関する情報を探してください。

于 2008-09-15T23:26:15.797 に答える