Question

我想将提交表单的JSON响应输出到iFrame中。

以下列方式执行此操作时，chrome会触发我的JSONView扩展程序，该扩展程序可以打印内容。

<form target='myIFrame'>...</form>
<iframe id='myIFrame'>

但如果我这样做：

<form id='mainForm'>...
<iframe id='myIFrame'>

<script>
$('#mainForm').submit(function(e) {
    $.ajax({
        url: ...,
        success: function(data) {
            $('#myIFrame').contents().find('html').html(data)
        }
    });

    return false; // Prevent execution of the actual submit action.
});
</script>

响应将作为单个纯文本段落打印到帧中，并且不会触发美化。

有没有办法通过jQuery.submit（）触发<form target='..'>行为等JSONView扩展？

Answer 1

这不是我问题的直接答案，我仍然希望了解如何触发Chrome。

然而，我偶然发现了这个Pretty Print JSON Data in Color演示并决定采用它（该页面没有名称，所以我不能相信作者）。

从好的方面来说 - 此解决方案不仅限于某个浏览器或扩展程序。

以下是结果的显示方式：

Pretty Print JSON Data in Color - Demo

如果链接死亡，这里是其内容摘要：

<强> html的：

<pre><code id=account></code></pre>
<pre><code id=planets></code></pre>

<强>的CSS：

pre {
    background-color: ghostwhite;
    border: 1px solid silver;
    padding: 10px 20px;
    margin: 20px; 
}
.json-key {
    color: brown;
}
.json-value {
    color: navy;
}
.json-string {
    color: olive;
}

<强>的.js：

if (!library)
    var library = {};

library.json = {
    replacer: function(match, pIndent, pKey, pVal, pEnd) {
        var key = '<span class=json-key>';
        var val = '<span class=json-value>';
        var str = '<span class=json-string>';
        var r = pIndent || '';
        if (pKey)
            r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
        if (pVal)
            r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
        return r + (pEnd || '');
        },
    prettyPrint: function(obj) {
        var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
        return JSON.stringify(obj, null, 3)
            .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
            .replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(jsonLine, library.json.replacer);
        }
    };

var account = { active: true, codes: [48348, 28923, 39080], city: "London" };
var planets = [{ name: 'Earth', order: 3, stats: { life: true, mass: 5.9736 * Math.pow(10, 24) } }, { name: 'Saturn', order: 6, stats: { life: null, mass: 568.46 * Math.pow(10, 24) } }];
$('#account').html(library.json.prettyPrint(account));
$('#planets').html(library.json.prettyPrint(planets));

现在一起：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Pretty Print JSON Data in Color - jsFiddle demo</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-2.0.0.js'></script>
    <style type='text/css'>
        pre {
        background-color: ghostwhite;
        border: 1px solid silver;
        padding: 10px 20px;
        margin: 20px; 
        }
        .json-key {
            color: brown;
        }
        .json-value {
            color: navy;
        }
        .json-string {
            color: olive;
        }
    </style>

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        if (!library)
            var library = {};

        library.json = {
            replacer: function(match, pIndent, pKey, pVal, pEnd) {
                var key = '<span class=json-key>';
                var val = '<span class=json-value>';
                var str = '<span class=json-string>';
                var r = pIndent || '';
                if (pKey)
                    r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
                if (pVal)
                    r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
                return r + (pEnd || '');
                },
            prettyPrint: function(obj) {
                var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
                return JSON.stringify(obj, null, 3)
                    .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
                    .replace(/</g, '&lt;').replace(/>/g, '&gt;')
                    .replace(jsonLine, library.json.replacer);
                }
            };

        var account = { active: true, codes: [48348, 28923, 39080], city: "London" };
        var planets = [{ name: 'Earth', order: 3, stats: { life: true, mass: 5.9736 * Math.pow(10, 24) } }, { name: 'Saturn', order: 6, stats: { life: null, mass: 568.46 * Math.pow(10, 24) } }];
        $('#account').html(library.json.prettyPrint(account));
        $('#planets').html(library.json.prettyPrint(planets));
    });//]]>    
    </script>
</head>
<body>
    <pre><code id=account></code></pre>
    <pre><code id=planets></code></pre>
</body>
</html>

将内容写入iFrame后触发Chrome的JSONView扩展程序？

1 个答案: