Boîte de dialogue jQuery UI + Réponse WebKit + HTML avec le script

Encore une fois, je suis confronté à un gros problème! :)Boîte de dialogue jQuery UI + Réponse WebKit + HTML avec le script

Alors, voici la substance:

du côté client, j'ai un lien. En cliquant dessus, jQuery envoie une requête au serveur , obtient une réponse en tant que contenu HTML, puis ouvre une boîte de dialogue d'interface utilisateur avec ce contenu.

Voici le code de la demande fonction:

function preview(){ 
    $.ajax({ 
     url: "/api/builder/", 
     type: "post", 
     //dataType: "html", 
     data: {"script_tpl": $("#widget_code").text(), 
       "widgets": $.toJSON(mwidgets), 
       "widx": "0"}, 
     success: function(data){ 
      //console.log(data) 
      $("#previewArea").dialog({ 
       bgiframe: true, 
       autoOpen: false, 
       height: 600, 
       width: 600, 
       modal: true, 
       buttons: { 
        "Cancel": function() { 
           $(this).dialog('destroy'); 
           } 
       } 
      }); 
      //console.log(data.toString()); 
      $('#previewArea').attr("innerHTML", data.toString()); 
      $("#previewArea").dialog("open"); 
     }, 
     error: function(){ 
      console.log("shit happens"); 
     } 
    }) 
}

La réponse (data) est:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript">var smakly_widget_sid = 0 ,widgets = [{"cols": "2","rows": "2","div_id": "smakly_widget","wid": "0","smakly_style": "small_image",}, ] </script> <script type="text/javascript" src="/media/js/smak/smakme.js"></script> </head> <body> preview <div id="smakly_widget" style="width:560px;height:550px"> </div> </body> </html>

Comme vous le voyez, il y a un script à la charge: smakme.js, en quelque sorte il ne fonctionne pas dans les navigateurs basés sur WebKit (j'ai essayé dans Safari et Chrome), mais dans Firefox, Internet Explorer et Opera cela fonctionne comme prévu!

Voici ce script:

String.prototype.format = function(){ 
    var pattern = /\{\d+\}/g; 
    var args = arguments; 
    return this.replace(pattern, function(capture){ return args[capture.match(/\d+/)]; }); 
} 

var turl = "/widget" 

var widgetCtrl = new(function(){ 

    this.render_widget = function (w, content){ 
     $("#" + w.div_id).append(content); 
    } 

    this.build_widgets = function(){ 
     for (var widx in widgets){ 
      var w = widgets[widx], 
       iurl = '{0}?sid={1}&wid={2}&w={3}&h={4}&referer=http://ya.ru&thrash={5}'.format(
        turl, 
        smakly_widget_sid, 
        w.wid, 
        w.cols, 
        w.rows, 
        Math.floor(Math.random()*1000).toString()), 
       content = $('<iframe src="{0}" width="100%" height="100%"></iframe>'.format(iurl)); 
      this.render_widget(w, content); 
     } 
    } 
}) 

$(document).ready(function(){ 
    widgetCtrl.build_widgets(); 
})

Est-ce une question de sécurité, ou autre chose?

Source

2010-03-04 Anton Koval'

Je pense que vous avez besoin d'une référence à jQuery dans la réponse (en tout cas, cela ne ferait pas de mal).

J'ai essayé de reproduire le problème en stockant le HTML et le JavaScript localement et j'ai dû l'insérer dans une référence à jQuery. J'ai utilisé une référence à une version Google de jQuery et inséré juste après la ligne avec meta:

<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> 
</script>

Cependant je ne voyais pas de différence entre Firefox 3.6 et Google Chrome 3.0.195.38. Le script a été exécuté avec succès dans Google Chrome lorsque la référence jQuery a été incluse.

Une version reformatée de la réponse (sans la référence jQuery):

<html> 
    <head> 
     <meta 
      http-equiv="Content-Type" 
      content="text/html; charset=UTF-8"> 
     <script type="text/javascript"> 
      var smakly_widget_sid = 0 , 
       widgets = 
       [ 
        { 
        "cols": "2", 
        "rows": "2", 
        "div_id": "smakly_widget", 
        "wid": "0", 
        "smakly_style": "small_image", 
        }, 
       ] 
     </script> 

     <script 
      type="text/javascript" 
      src="/media/js/smak/smakme.js"> 
     </script> 
    </head> 

    <body> 
     preview 
     <div 
      id="smakly_widget" 
      style="width:560px;height:550px"> 
     </div> 
    </body> 
</html>

Source

2010-03-05 20:09:58

Boîte de dialogue jQuery UI + Réponse WebKit + HTML avec le script

Répondre

Questions connexes