0

目的は、リンクをクリックして、親ウィンドウからフォーマットされたソース コードを表示する新しいウィンドウを表示できるようにすることです。

調査を通じて、ほとんどのタスクを達成することができましたが、親、インデント、およびすべてのソース コードをそのまま表示するには、新しいウィンドウが必要です。現在、HTML エンティティは対応する表示として表示されています (したがって、ソースの の代わりに実際の商標を出力します™)。

私の例でわかるように、一連のエンティティをループして文字列の置換を行うことを考えていましたが、ロジックがオフになっていると考えており、何が起こっているのかわかりません。

特にエンティティ: • (雄牛)、& (amp)、® (reg)、™ (貿易)、< (lt)、> (gt)

これまでのところ、ハイパーリンクが起動するコードは次のとおりです。2行目に終了ボディタグが出力されていることを理解できる人へのボーナスです（私は困惑しています）：

解決につながる方向性については、事前に非常に感謝しています。

function viewSource( e )
{
    e.preventDefault( );

    var source = '<!DOCTYPE html>' + "\n"
               + '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n\n"
               + "\t" + document.getElementsByTagName( 'html' )[0].innerHTML + "\n\n"
               + '</html>';

    entities = [
        new Entity( '<', '&lt;' ),
        new Entity( '>', '&gt;' )
    ];

    for ( var i = 0; i < entities.length; i++ )
    {
        var regex = new RegExp( entities[i].entity, 'g' );
        source = source.replace( regex, entities[i].html );
    }

    source = '<pre>' + source + '</pre>';

    var sourceWindow = window.open( '', '_blank' );
    sourceWindow.document.write( source );
    sourceWindow.document.close( );

    if ( window.focus )
    {
        sourceWindow.focus( );
    }
}

更新（まだ未解決の謎）：

AJAX リクエストを使用する提案を試みましたが、それでも同じ結果が得られます (11 行目は を示していますnew Entity( '<', '<'),)。AJAX の試みは次のようになります。

function viewSource( e )
{
    e.preventDefault( );

    var xmlhttp;

    if ( window.XMLHttpRequest )
    {
        // IE7+, Fx, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest( );
    }
    else
    {
        // IE6, IE5
        xmlhttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
    }

    xmlhttp.onreadystatechange = 
        function ( )
        {
            if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
            {
                var source = xmlhttp.responseText.replace( /</g, '&lt;' ).replace( />/g, '&gt;' );
                source = '<pre>' + source + '</pre>';

                var sourceWindow = window.open( '', '_blank' );
                sourceWindow.document.write( source );
                sourceWindow.document.close( );

                if ( window.focus )
                {
                    sourceWindow.focus( );
                }
            }
        };

    xmlhttp.open( 'GET', '/', true );
    xmlhttp.send( );
}
4

2 に答える 2

0

ソースを適切にエスケープしていません。ソースのテキスト表現で
DOM 要素を構築する必要があります。

jQuery の使用:

$('<pre />').text(source).appendTo(document.body);
于 2011-11-04T12:43:58.780 に答える
0

だから、すべての方向性について@SLaksに感謝します。私は望んでいたものに近いものを達成することができましたが、まだいくつかの小さな癖があり、それを受け入れなければならないかもしれません. jQueryなどのライブラリを使用しないようにしています。

まだ発生している問題は次のとおりです。 - 出力ソースは、最後のスラッシュなしで自己終了タグを表示しています。したがって、たとえば<br />は として表示され<br>ます。- 何らかの理由で、body の終了タグが下の行に折り返されています。次のようにレンダリングする必要があります。

    </body>

</html>

ただし、代わりに次のようにレンダリングされます。

[tab]
</body>

</html>

それにもかかわらず、私はまだ結果に満足しており、それで十分です. ただし、サードパーティのライブラリを必要としないより良いソリューションがあれば、それは大歓迎です。これが最新の試みです：

function htmlEntity( character )
{
    switch ( character.charCodeAt( 0 ) )
    {
        case 174:  return '&reg;';    break;
        case 233:  return '&eacute;'; break;
        case 8211: return '&ndash;';  break;
        case 8220: return '&ldquo;';  break;
        case 8221: return '&rdquo;';  break;
        case 8226: return '&bull;';   break;
        case 8482: return '&trade;';  break;
        default:   return character;
    }

    if ( character.charCodeAt( 0 ) > 127 )
    {
        return '&#' + character.charCodeAt( 0 ) + ';';
    }

    return character;
}

function viewSource( e )
{
    e.preventDefault( );

    var source = '<!DOCTYPE html>' + "\n"
               + '<html xmlns="http://www.w3.org/1999/xhtml">' + "\n\n"
               + "\t" + document.getElementsByTagName( 'html' )[0].innerHTML + "\n\n"
               + '</html>';

    var entities = [ '®' ];
    for ( i = 0; i < entities.length; i++ )
    {
        source.replace( entities[i], htmlEntity( entities[i] ) );
    }

    var temp = '';
    for ( i = 0; i < source.length; i++ )
    {
        temp += htmlEntity( source.charAt( i ) );
    }

    var pre = document.createElement( 'pre' );
    pre.textContent = temp;

    source = '<pre>' + pre.innerHTML + '</pre>';

    var sourceWindow = window.open( '', '_blank' );
    sourceWindow.document.write( source );
    sourceWindow.document.close( );

    if ( window.focus )
    {
        sourceWindow.focus( );
    }
}
于 2011-11-04T14:07:47.793 に答える