使用javascript从数组中的HTML页面捕获图像 [英] Capturing images from HTML page in array using javascript

问题描述

我正在尝试使用Javascript捕获HTML页面中的所有图像.我找到了这个类似的问题，对这个问题的最佳答案非常详细地给出了该问题的解决方案: 在html页面中使用Javascript检测所有图像

I'm trying to capture all images in an HTML page using Javascript. I found this similar question, the best answer to which gives in excellent detail a solution to the problem: Detect all images with Javascript in an html page

我的问题是，即使直接复制/粘贴到Firefox控制台中，我也无法获得显示在最佳答案中的代码而不会出错.我怀疑答案很直截了当，尽管它让我挠头了几个小时-有人能帮忙吗?

My question is that I can't get the code shown in the best answer to run without error - even when I copy/paste directly into the Firefox console. I suspect the answer is straightforward, though it's had me scratching my head for hours - is anyone able to help please?

这段代码给我错误参数列表后缺少"SyntaxError:missing" ...

This code gives me the error "SyntaxError: missing ) after argument list"...

var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
    var style = window.getComputedStyle( el, false );
    if ( style.backgroundImage != "none" ) {
        images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")
    }
}

完整的解决方案(似乎包括上述内容)也似乎给出了相同的错误...

The full solution, which seems to include the above, also appears to give the same error...

var images = [],
    bg_images = [],
    image_parents = [];
document.addEventListener('DOMContentLoaded', function () {
    var body = document.body;
    var elements = document.body.getElementsByTagName("*");

    /* When the DOM is ready find all the images and background images
        initially loaded */
    Array.prototype.forEach.call( elements, function ( el ) {
        var style = window.getComputedStyle( el, false );
        if ( el.tagName === "IMG" ) {
            images.push( el.src ); // save image src
            image_parents.push( el.parentNode ); // save image parent

        } else if ( style.backgroundImage != "none" ) {
            bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
        }
    }

    /* MutationObserver callback to add images when the body changes */
    var callback = function( mutationsList, observer ){
        for( var mutation of mutationsList ) {
            if ( mutation.type == 'childList' ) {
                Array.prototype.forEach.call( mutation.target.children, function ( child ) {
                    var style = child.currentStyle || window.getComputedStyle(child, false);
                    if ( child.tagName === "IMG" ) {
                        images.push( child.src ); // save image src
                        image_parents.push( child.parentNode ); // save image parent
                    } else if ( style.backgroundImage != "none" ) {
                        bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
                    }
                } );
            }
        }
    }
    var observer = new MutationObserver( callback );
    var config = { characterData: true,
                attributes: false,
                childList: true,
                subtree: true };

    observer.observe( body, config );
});

谢谢.

推荐答案

您在images.push()行和最后一行缺少一些右括号.

You're missing some closing parentheses on the images.push() line and the last line.

不确定这是否会使您的代码完成您最终希望做的事情，但至少不会引起语法错误.

Not sure if this will make your code do what you ultimately want it to do, but it will at least not cause a syntax error.

var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
    var style = window.getComputedStyle( el, false );
    if ( style.backgroundImage != "none" ) {
        images.push(style.backgroundImage.slice(4, -1).replace(/['"]/g, ""));
    }
});

这篇关于使用javascript从数组中的HTML页面捕获图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！