jQuery UI 对话框 + WebKit + 带有脚本的 HTML 响应答案

【问题标题】：jQuery UI dialog + WebKit + HTML response with scriptjQuery UI 对话框 + WebKit + 带有脚本的 HTML 响应
【发布时间】：2010-03-04 10:52:52
【问题描述】：

我又遇到了一个大问题！ :)

所以，这里是东西：

在客户端，我有一个链接。通过点击它，jQuery 发出一个请求服务器，获取作为 HTML 内容的响应，然后弹出带有该内容的 UI 对话框。

这里是请求函数的代码：

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");
        }
    })
}

回复 (data) 是：

<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>

如您所见，有一个要加载的脚本：smakme.js，不知何故它没有在基于 WebKit 的浏览器中执行（我在 Safari 和 Chrome 中尝试过），但在 Firefox、Internet Explorer 和 Opera 中它可以正常工作！

这是脚本：

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();
})

这是安全问题还是其他什么？

【问题讨论】：

标签： jquery iframe webkit

【解决方案1】：

我认为您需要在响应中引用 jQuery（无论如何它都不会受到伤害）。

我试图通过在本地存储 HTML 和 JavaScript 来重现该问题，但我不得不插入对 jQuery 的引用。我使用了参考一个 Google 版本的 jQuery 并在 meta 行之后插入它：

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

但是我发现 Firefox 3.6 和 Google Chrome 3.0.195.38 之间没有区别。当包含 jQuery 引用时，该脚本在 Google Chrome 中积极执行。

响应的重新格式化版本是（没有 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>

【讨论】：