1

Gist を HTML に埋め込むのは簡単です。以下のコードを含めるだけで、ブラウザーはページの読み込み時にリソースをフェッチします。

<script src="https://gist.github.com/Xeoncross/eec39effbe6b9c421fec.js"></script>

ただし、ショートコードを探してページを解析し、それらのテキスト ノードをスクリプト タグに置き換えようとしています。

[gist:eec39effbe6b9c421fec]

残念ながら発砲していないようです。

function loadGist(element, gistId) {
    var callbackName = "gist_callback";
    window[callbackName] = function (gistData) {
        console.log('Made it!');
        delete window[callbackName];
        var html = '<link rel="stylesheet" href="' + gistData.stylesheet + '"></link>';
        html += gistData.div;

        console.log(element.innerHTML);

        element.innerHTML = html;
        script.parentNode.removeChild(script);

        //element.parentNode.insertBefore(element, node);
        //node.parentNode.removeChild(node);

    };

    var script = document.createElement("script");
    script.setAttribute("src", "https://gist.github.com/" + gistId + ".json?callback=" + callbackName);
    document.body.appendChild(script);
    //return script;
}

function traverseChildNodes(node) {

    var next;

    if (node.nodeType === 1) {

        // (Element node)

        if (node = node.firstChild) {
            do {
                // Recursively call traverseChildNodes
                // on each child node
                next = node.nextSibling;
                traverseChildNodes(node);
            } while(node = next);
        }

    } else if (node.nodeType === 3) {

        // (Text node)

        if (/\[(\w+):([^\]]+)\]/g.test(node.data)) {
            // Do something interesting here
            console.log('found it', node);

            //<script src=""></script>

            var script = document.createElement("script");
            script.setAttribute("src", "https://gist.github.com/Xeoncross/eec39effbe6b9c421fec.js");
            //document.body.appendChild(script);

            var script = loadGist(node, 'eec39effbe6b9c421fec');

            /*
            var parent = node.parentNode;
            console.log(parent);
            parent.insertBefore(script, node);
            parent.removeChild(node);
            */

            //node.parentNode.insertBefore(script, node);
            //node.parentNode.removeChild(node);

        }

    }

}


var $body = document.getElementsByTagName("body")[0];

traverseChildNodes($body);

ああ、私はこれをすべてバニラ Javascript で行っています。jQuery は使用しないでください。

4

1 に答える 1

2

コードは問題なく実行されているようです。これが私の実際の例です：

gistexample.html

<!DOCTYPE html>
<html>
<head>
  <title>Gist Shortcode Replacement</title>
</head>
<body>
<main>
<h1>Gist Shortcode Replacement</h1>
<p>lorem ipsum</p>
<p>some text [gist:eec39effbe6b9c421fec] more text</p>
</main>
<script src="loadgists.js" type="text/javascript"></script>
</body>
</html>

loadgists.js

function loadGist(element, gistId) {
    var callbackName = "gist_callback";
    window[callbackName] = function (gistData) {
        console.log('Made it!');
        delete window[callbackName];
        var html = '<link rel="stylesheet" href="' + gistData.stylesheet + '"></link>';
        html += gistData.div;

        var gistContainer = document.createElement('div');
        gistContainer.innerHTML = html;
        element.parentNode.appendChild(gistContainer);

        // console.log(element.innerHTML);
        // element.innerHTML = html;
    };

    var script = document.createElement("script");
    script.setAttribute("src", "https://gist.github.com/" + gistId + ".json?callback=" + callbackName);
    document.body.appendChild(script);
}

function traverseChildNodes(node) {
    var next;

    if (node.nodeType === 1) {
        if (node = node.firstChild) {
            do {
                // Recursively call traverseChildNodes
                // on each child node
                next = node.nextSibling;
                traverseChildNodes(node);
            } while(node = next);
        }

    } else if (node.nodeType === 3) {
        if (/\[(\w+):([^\]]+)\]/g.test(node.data))
            var script = loadGist(node, 'eec39effbe6b9c421fec');
    }
}

var $body = document.getElementsByTagName("body")[0];
traverseChildNodes($body);

考え

私が微調整した唯一のことは、Gist を DOM に挿入することです。周囲のテキストをそのまま残してショートコードを実際に置き換えるのは、少しトリッキーです (特にバニラ JS のみを使用する場合)。traverseChildNodes関数を書いた人はこれについていくつかの考えを持っていますが.

于 2014-01-30T17:07:58.233 に答える