4

したがって、私はこの問題に対する非jQueryソリューションを持っていますが、方法があればむしろ jQuery を使用したいと思います。また、なぜこれが起こっているのかについて非常に興味があります。

Facebook iframe アプリケーションがあり、Facebox を使用してページ上のポップアップにXFBMLを動的にロードしています。

今、私が読​​み込んでいる XFBML はたまたまfb:serverfbmlタグであり、Facebook を指す iframe を作成し、FBML をレンダリングします。これは基本的に、FBML を動的に追加し、ポップアップを表示した後に XFBML を再解析する必要があることを意味します。だから私は次のようなコードを持っています:

var App = {};

App.inviteFBML = '\
<fb:serverfbml style="width: 300px; height: 225px;"> \
    <script type="text/fbml">  \
        <fb:fbml>  \
        </fb:fbml>\
    </script>\
</fb:serverfbml>';

App.inviteFBMLHolder = "<div id='invite_holder' style='width: 300px; height: 250px;'></div>";

App.showInvitePrompt = function(){
    $.facebox(App.inviteFBMLHolder); 
    document.getElementById('invite_holder').innerHTML = App.inviteFBML;
    FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));
};

上記のコードが機能するようになりましたが、使用していることに注意してください 

document.getElementById('invite_holder').innerHTML

それよりも

$('#invite_holder').html();

jQuery の.html関数を使用すると、HTML を挿入する前に実際に再構築されます。それを次のように再構築します。

<fb:serverfbml style="width: 300px; height: 225px;"> 
</fb:serverfbml>
<script type="text/fbml">  
    <fb:fbml>  
    </fb:fbml>
</script>

非標準のタグが含まれているため、これを行っていると思いますが、挿入する前にjQueryが文字列を再フォーマットしないようにする方法はありますか?

4

4 に答える 4

3

あるいは、物事を台無しにするのはjQueryのHTMLパーサーです。したがって、innerHTML手動で設定すると正常に機能します。

したがって、以下を使用してすべてをロードできます。

$.ajax({
  type:"GET",
  url: "/my/url",
  datatype: 'text',
  success: function(html) {
    var ele = $('myselector')[0];
    ele.innerHTML = html;
    FB.XFBML.Host.parseDomElement(ele);
  }
});

これに関する唯一の問題は、HTMLに含まれているJavaScriptコードが挿入時に実行されないことです。

于 2010-02-19T22:59:55.887 に答える
1

FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));追加されたhtmlを解析するために使用しているように。関数が単純なテキストを探しているはずだと推測しています。次のようなjqueryを使用して、HTMLではなくテキストとして追加してみてください。

$('#invite_holder').text(App.inviteFBML);
于 2009-10-05T17:29:34.367 に答える
1

私は似たようなことをしていて、コードを再配置するjQueryで同じ問題がありましたが、次のことを行うことでそれを回避することができました:

<fb:serverfbml id="fbml">
</fb:serverfbml>

<script type="text/javascript">
function populateInviteFbml() {
    $('#fbml').load('/getinvitefbml', null, renderInvite); // gets the FBML from <script type="text/fbml"> on in
}

function renderInvite() {
   FB_RequireFeatures(['XFBML'], function() {
         FB.Facebook.init('abcdabcdabcdabcd', '/xd_receiver.htm');
            });
}
</script>
于 2009-12-30T22:50:12.133 に答える
0

<script>jQuery は、スクリプト ブロック内にない通常の html タグよりも、タグ内で作成されたものに対してはるかに寛大であるように見えます。最初に id を使用して外側の非 html タグを作成し、次にそれに追加できます。

$(".inner").append("<fb:serverfbml id='someID' style='width:300px; height: 225px;'>");
$("#someID").append("<script type='text\fbml'><fb:fbml></fb:fbml></script>");
于 2009-12-31T23:04:48.450 に答える