Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Check to see if image is present

    Hello. I'm brand new to coding & I'm struggling a bit. Excuse me if this is in the wrong section or if I don't make sense.

    How do I check if a certain image is present in a webpage & display a message box if it is?

    e.g.
    If the webpage contains image.jpg then display a message box
    If the webpage doesn't contain image.jpg then refresh the page & check again

    The script needs to check another webpage, by the way, not the page the script is being run on.

    Thank you in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,547
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    The script needs to check another webpage, by the way, not the page the script is being run on
    It can't. Unless both web pages come from the same web site. JavaScript can *NOT* do cross-site scripting.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    It can't. Unless both web pages come from the same web site. JavaScript can *NOT* do cross-site scripting.
    It's going to be run locally as a plugin for Chrome. The idea was to have it so I'd open the webpage, turn on the plugin (extension as Chrome calls it) & it'll keep checking that page for image.jpg. Maybe I was a bit misleading by saying that - sorry.

    Thanks for replying.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,547
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    Oh...okay.

    Code:
    var images = document.getElementsByTagName("img");
    var found = false; // or null
    var lookFor = /xxxx.jpg$/i;
    
    for ( var i = 0; i < images.length; ++i )
    {
        if ( lookFor.test( images[i].src ) 
        {
            found = true; // or found = images[i] if you want a reference to it 
            break;
        }
    }
    if ( found ) ... 
    or 
    if ( found != null ) ...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not too sure how I'd get it to work just from that.

    Is it possible I can have 2 buttons, one that says start & one that says stop? When start's clicked, it keeps checking & refreshing until I click stop. It'd be good if the page was allowed to load completely before it checks & then maybe waits a second before refreshing (to prevent throttling).

    I hope I'm not being a pain. Like I said, I'm completely new. It'd be helpful if you could explain each line of code so that I can learn it better, too.

    Thank you.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,547
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    I don't know how Chrome plugins work. I assumed you knew that part.

    I don't understand how you can add buttons to an existing web page just using the plugin. Does it somehow insert new stuff into the existing HTML???

    Sorry. You'll have to figure that part out.

    Annotating my code:
    Code:
    // get a collection of *ALL* <img> tags on the page
    var images = document.getElementsByTagName("img");
    
    // initialize our "found" variable to indicate not found
    var found = false; // or null
    
    // this is the image name (src=".../xxxx.jpg") that you want to look for
    // we use a regular exprssion because
    // (1) the ending $ means that you want to find xxxx.jpg at the end of the src= attribute
    // (2) the /i on the end means "ignore case"
    var lookFor = /xxxx.jpg$/i;
    
    // so look through all the <img> tags on the page
    for ( var i = 0; i < images.length; ++i )
    {
        // if our regular expression matches the .src of any <img>...
        if ( lookFor.test( images[i].src ) 
        {
            // change our "found" flag to indicate we found a match
            found = true; // or found = images[i] if you want a reference to it 
            // ...and exit the for loop
            break;
        }
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I understood correctly, Chrome lets you insert your javascript into a webpage you're on automatically or at the click of a button (the button being the extension itself so that when you click the extension, it inserts the code).

    Here's the link: clicky click.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,547
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    Hmmm...I have a great use for this! Will have to experiment.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Hmmm...I have a great use for this! Will have to experiment.
    Brilliant! Will you get back to me with your results?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •