0

URL を埋め込みコードに置き換える JavaScript 関数を作成しています (例: YouTube の URL を YouTube ビデオに置き換えます)。次のコールバックで String.replace() を使用することを考えています:

 function replacer(match) {
    if (isYoutubeLink()) {
       return getYoutubeEmbedCode();
    }
    // repeat for other types of urls
 }

ただし、getYoutubeEmbedCode() は oembed API 呼び出しを行うため、非同期であり、値を返すことはできません。すべての URL を置き換えるにはどうすればよいですか?

編集:URLをコードに置き換えた後、新しいノードを作成して、ビデオがhtmlテキストだけでなく実際のビデオとして表示されるようにする必要もあります。これは、すべての非同期タスクがいつ終了したかを知る必要があることを意味すると思います。

4

3 に答える 3

0

非同期リクエストの onreadystatechange にフックする必要があります

request.open("GET", youtubeurl, true);
request.onreadystatechange = getYoutubeEmbedCode;
request.send(null);

編集：

http://jsfiddle.net/76dJh/

于 2013-06-06T17:58:51.403 に答える
0

完了時にそれを処理するクロージャーを渡します。

function replacer(match) {

    if (isYoutubeLink()) {
       getYoutubeEmbedCode(function(){//code to change URLs here});
    }
    // repeat for other types of urls
}

このようにコードを正確に構成することはしません。呼び出しのスコープから見える変数へのクロージャーを抽象化しますが、これは簡潔にするためです。

- 編集 -

さらに、これはあなたが使用したいアプローチではないことに気づきました。href 属性ではなく、リンク (アンカー タグ) 自体を置き換えようとしています。

1) YouTube 動画に変更する予定のすべてのアンカー タグを選択し、それらを配列に保存します。それらすべてにクラスまたはデータ属性を指定すると、これは簡単です (比較が容易になり、基本的な css クラスと衝突する可能性が低くなるため、この場合はデータ属性を好みます)。

2）それらをループし、href値またはデータ属性名を比較して（<-データ属性を使用する利点です）、要素ごとにプルするYouTube vidを決定します。ajax 呼び出しに、ターゲット アンカー タグが渡されるコールバック関数 (元の投稿で述べたクロージャ) を渡します。

3) ajax が戻ってきたときにターゲット アンカー タグを使用して、その後に YouTube コードを配置します (追加などを使用)。

4) ターゲットのアンカー タグを削除します。

5) ビデオの後に何かを追加したい場合は、ここにビデオがあるので、それをターゲットにすることで実行できます。

すべて完了。

私の意見では、これはより良いアプローチです。多分私はあなたの投稿の要点を見逃しているかもしれませんが、私が読んだことから、あなたのアプローチはあなたが本当にやりたいこと以外のことをしようとしているように思えます.

于 2013-06-06T17:59:27.187 に答える
-1

残念ながら、独自の文字列置換を作成する必要があります。多分このようなもの：

function replace_async(str, pattern, replacer, cb) {
  var result = '';
  function _(arg) {
    result += arg;
    var first_match = pattern.exec(str);
    if (!first_match) {
      result += str;
      return cb(str);
    }
    result += str.substr(0, first_match.index);
    str = str.substr(first_match.index+first_match.input.length);
    replacer(first_match, _);
  }
  _('');
}

次に、次のように async replace コールバックを記述できます。

replace_async("foo bar http://youtube.com/... baz http://youtube.com", url_pattern, function(match, cb) {
  getYoutubeEmbedCode(match.input, cb);
}, function(result) {
  alert("Text with translated URLs:\n"+result);
});

もちろん、回避策として同期リクエストを実行することもできますが、それはあまり良い考えではありません。

于 2013-06-06T18:13:19.623 に答える