0

私は実際に、AJAX とポップアップ ウィンドウに基づく Web サイトのソース コード ビューアーを作成しようとしています。これにより、ビューアをカスタマイズできるようになります。構文にはhightlight.jsを使用していますが、そのライブラリを使用するのは初めてです。

プロセスは簡単です。

  1. AJAXを使用してURLを含むページHTMLを取得しています(ここではjQueryを使用しています)
  2. 結果のコンテンツをウィンドウに入れて表示します。
  3. ウィンドウでは、Highlight.js は (想定) コードを色付けするためのものです。

このトピックに似ています: Javascript を使用してブラウザで "ソースの表示" HTML ウィンドウをプログラムで開きますか? ただし、構文の強調表示が追加されています。残念ながら、ウィンドウにはコードが表示されていますが、そのウィンドウは色付けされていません。

これは関数全体です (クロスオリジン要求のフォールバックを提供します)

function show_source(link) {
    $.ajax({
        method: "GET",
        url: link,
        dataType: "html",
        success: function (data) {
            var source = data;
            //parse special chars
            source = source.replace(/</g, "&lt;").replace(/>/g, "&gt;");
            // add <pre> tags to preserve whitespace
            source = "<!DOCTYPE html><html><head><link rel='stylesheet' href='/css/include/default.css'><script src='/lib/include/highlight.pack.js'></script><script>hljs.initHighlightingOnLoad(document.getElementById('code'));</script></head><body><pre id='code' class='html'>" + source + "</pre></body></html>";
            //now open the window and set the source as the content
            var sourceWindow = window.open('', 'Source code of ' + link + '', 'height=800,width=800,scrollbars=1,resizable=1');
            if (!sourceWindow || sourceWindow.closed || typeof sourceWindow.closed == 'undefined') {
                alert("Please allows this popup window to be shown");
            } else {
                 sourceWindow.document.write(source);
                sourceWindow.document.close(); //close the document for    writing, not the window
                //give source window focus
                if (window.focus) {
                    sourceWindow.focus();
                }
            }
        },
        error: function(){
            window.open("view-source:"+link+"", "_blank");
        }
    });
}

しかし、コードを何度も検証したところ、すべて問題ないようです。Firefox 開発ツールは、CSS および JS ファイルが正常にロード (GET) され、JS エラーがないことを示しました。問題はどこだ？助けてくれてありがとう。

編集:不足している括弧を追加しましたが、あまり機能しません。

4

1 に答える 1