0

div を置き換えるために AJAX 呼び出しを行うと、応答に外部の .js ファイルを指すスクリプト タグが含まれます。ただし、返された JS を実行することはできません。応答を eval() しようとしましたが、うまくいきませんでした。また、onComplete コールバック内から外部 .js ファイル内の関数を呼び出そうとしましたが、これも機能しません。他に何をすべきかわからない。mootoolsコア1.4.5を使用しています

メインページのJS

window.addEvent('domready', function(){  

    function ajaxfunc(i)
    {
        return function(e){
            e.stop();
            var requestData = new Request({
               url: 'blah.php?cat=' + i,
               evalScripts: true,
               evalResponse: true,
                   onComplete: function(response){
                       $('rt-main').set('html', response);
                   }
            });
            requestData.send();
        };
    }

    var total = $('cat_table').getChildren('div').length;
    for(var i=1; i<=total; i++)
    {
       $('catClick'+i).addEvent('click', ajaxfunc(i));
    }


});

返された HTML

<script src="listings.js" type="text/javascript"></script>
...(other markup, etc)

そして、そのlistings.jsファイルの中に

window.addEvent('domready', function(){  

    function gotoItem(i)
    {
       return function(e){
          e.stop();
          var id= i;
          var requestData = new Request ({
             url: 'blah.php?id='+id,
             onComplete: function(response){
                $('rt-main').set('html', response);
             }
          });
          requestData.send();
       };
    }

   $$('.itemBox').each(function(el){
      el.getElement('a.itemClick').addEvent('click', gotoItem(el.id)); 
   });

});

私が作業している環境は、何かに影響する場合に備えて Joomla 3.1 です。

4

2 に答える 2

2

DOMdomreadyはすでに準備ができています。

事前に手動で行ってwindow.removeEvents('domready')から、XHR 経由でロードしwindow.fireEvent('domready')て実行することができます。

イベント委任を使用すると、最初の ajax リクエストの後に js を実行する必要がなくなります。必要なのは次のようなものだけです。

window.addEvent('domready', function () {
    var ct = document.id('cat_table'),
        divs = ct.getChildren('div'), //need a more qualified selector
        rtMain = document.id('rt-main');

    divs.each(function(el, i){
        // store the index, if you don't have it as an attribute like id, rel or data-id
        el.store('index', i);
    });

    ct.addEvent('click:relay(div)', function(e){ // needs more qualified also.
        e && e.stop();

        new Request({
            method: 'get', // not post, check - faster
            url: 'blah.php?cat=' + this.retrieve('index'),
            evalResponse: true,
            onComplete: function(){
                rtMain.set('html', this.response.text);
            }
        }).send();
    });

    // delegation, assumes .itemBox are children of rtMain - just delegate to other parent otherwise.
    rtMain.addEvent('click:relay(.itemBox)', function(e){
        // reliance on index in collection is bad, try to change response above to contain data-id.
        e.stop();

        new Request({
            method: 'get',
            url: 'blah.php?id=' + this.get('data-id'), 
            onComplete: function(){
                rtMain.set('html', this.response.text);
            }
        }).send();
    });
});

Elements コレクション内のアイテムのインデックスに依存していたことに注意してください。これは安全ではありません。バックエンドによって提供されるハード db id を使用します。これは安全ではありません。人々は DOM を変更したり、要素を削除したり、表示されるべきではない ID を取得したりできます。そうでなければできないわけではありませんが...

XHR を介してスクリプトを取り込み、応答を評価することはアンチパターンであり、XSS のページに攻撃のベクトルを与えることを忘れないでください。

于 2013-08-01T14:14:07.420 に答える
0

リンクされたスクリプトは.js「domready」イベントにラップされているように見えますが、(ここでは少し想定しています) dom は既に ready イベントを発生させているはずです。window.addEvent('domready', function(){ ...}ラッパーを削除してみてください。

編集あなたはそうではないと言っているので、スクリプトタグを返す代わりに、単にスクリプトを返し、次のようにページに追加した場合、それはうまくいくかもしれません:

onComplete: function (response) {
    //
    var script = document.createElement('script');
    script.innerHTML = response;
    document.getElementById('rt-main').appendChild(script);

}

編集これで少し遊んだだけで、洗練されていない解決策fiddleがあるようです。

于 2013-08-01T07:04:52.260 に答える