使用用户脚本记录网页的动态创建的标签属性 [英] Log a web page's dynamically-created tag attributes with a userscript

问题描述

使用Brock Adams对记录网页的动态创建的DOM的答案"，我能够跟踪所有动态创建的标记带有用户脚本的元素" .

I am able to track all the dynamically created tags, using Brock Adams' answer to "Log a web page's dynamically-created, DOM elements with a userscript".

现在，我想获取标签的属性.我通过在 LogNewTagCreations()中添加if条件来进行尝试，但此方法不起作用.
在此示例中，我正在检查脚本标签的属性:

Now I want to get the attributes of the tags. I tried it by adding an if condition in LogNewTagCreations () but it didn't work.
In this example I am checking attributes for script tags:

if(tagName=="script")
    {
        console.log("------------",elem.attributes.src.Value);
    }

请帮助我.

推荐答案

因为< script> s的 src 设置在 createElement()外部，/code>调用，改编前一个脚本需要做更多的工作.您必须基本上异步检查 src 属性.

Because a <script>s src is set outside the createElement() call, adapting the previous script requires a little more work than that. You must check for the src attribute essentially asynchronously.

一种方法是使用另一个轮询间隔.将其滚动到之前的脚本(以及一些内务处理)，脚本代码变为:

One way to do that is with another polling interval. Rolling that into the previous script (along with some housekeeping), the script code becomes:

//--- Intercept and log document.createElement().
function LogNewTagCreations () {
    var oldDocumentCreateElement    = document.createElement;

    document.createElement          = function (tagName) {
        var elem = oldDocumentCreateElement.apply (document, arguments);
        console.log ("Dynamically created a(n)", tagName, " tag.  Link: ", elem);

        if (tagName == "script") {
            GetScriptAttributes (elem);
        }

        return elem;
    }
}

function GetScriptAttributes (elem, tagNum, timerIntVar) {
    /*--- Because a <script>s src or text won't be set for some while, we need
        to poll for when they are added.
    */
    GetScriptAttributes.tagNum  = GetScriptAttributes.tagNum || 0;
    if ( ! tagNum) {
        GetScriptAttributes.tagNum++;
        tagNum = GetScriptAttributes.tagNum;
    }

    if (elem.src) {
        doneWaiting ();
        console.log (
            "Script tag", tagNum,
            " has a src attribute of:", elem.src
        );
    }
    else if (elem.textContent) {
        doneWaiting ();
        console.log (
            "Script tag", tagNum,
            " has a JS code of:", elem.textContent
        );
    }
    else {
        if ( ! timerIntVar) {
            var timerIntVar = setInterval (
                function () {
                    GetScriptAttributes (elem, tagNum, timerIntVar);
                },
                50
            );
        }
    }

    function doneWaiting () {
        if (timerIntVar) {
            clearInterval (timerIntVar);
        }
    }
}

/*--- The userscript or GM script will start running before the DOM is available.
    Therefore, we wait...
*/
var waitForDomInterval = setInterval (
    function () {
        var domPresentNode;
        if (typeof document.head == "undefined")
            domPresentNode = document.querySelector ("head, body");
        else
            domPresentNode = document.head;
        if (domPresentNode) {
            clearInterval (waitForDomInterval);
            addJS_Node (GetScriptAttributes.toString() );
            addJS_Node (null, null, LogNewTagCreations);
        }
    },
    1
);

//--- Handy injection function.
function addJS_Node (text, s_URL, funcToRun) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}

这篇关于使用用户脚本记录网页的动态创建的标签属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！