jQuery UI dialog + WebKit + HTML response with script
Once again I am faced with a great problem! :)
So, here is the stuff:
on the client side, I have a link. By clicking on it, jQuery makes a request to the server, gets response as HTML content, then popups UI dialog with that content.
Here is the code of the request-function:
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");
}
})
}
The response (data) is:
<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>
As you see, there is a script to load: smakme.js, somehow it doesn't
execute in WebKit-based browsers (I tried in Safari and Chrome), but in Firefox, Internet Explorer and Opera it works as expected!
Here is that 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,
开发者_如何学JAVA 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();
})
Is that some security issue, or anything else?
I think you need a reference to jQuery in the response (in any case it wouldn't hurt).
I tried to reproduce the problem by storing the HTML and JavaScript locally and I had to insert to a reference to jQuery. I used a reference to
a Google version of jQuery and inserted it right after the line with meta:
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
However I saw no difference between Firefox 3.6 and Google Chrome 3.0.195.38. The script positively executed in Google Chrome when the jQuery reference was included.
A reformatted version of the response is (without the jQuery reference):
<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>
加载中,请稍侯......
精彩评论