将内容写入 iFrame 后触发 Chrome 的 JSONView 扩展？答案

【问题标题】：Trigger Chrome's JSONView extension after writing content to an iFrame?将内容写入 iFrame 后触发 Chrome 的 JSONView 扩展？
【发布时间】：2013-12-21 18:30:13
【问题描述】：

我想将提交表单的 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() 触发 JSONView 扩展，例如 <form target='..'> 行为？

【问题讨论】：

标签： jquery json google-chrome iframe form-submit

【解决方案1】：

这不是我问题的直接答案，如果可能的话，我仍然想了解如何触发 Chrome。

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

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

结果如下：

以防万一链接失效，以下是其内容摘要：

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

【讨论】：