how to select img with jquery on an html page that's not yours

I'm trying to display an html page in a div, and then select all the img tags in that page individually and get them to display an overlay div on the images.

So far I can put the html inside a div called "asd", and the jquery seems to work with the img tags that are external to the html page, but the selector doesn't select the img tags inside the div "asd" itself.

I have tried using an iframe but I read somewhere that jquery doesn't work inside iframes because selecting an iframe even if it has an ID tag doesn't work. If it can be used using an iframe please let me know.

So far I've tried $("object img"), $("body img") and $("img") without luck. The google search is simply "electric cars" images.

My jquery selector wraps the img tag in a div, and then inserts a button with absolute position inside the div so that the button will appear in the top right corner of every img.


<div id="asd">


<button class="buttons_move_shift_min_max_close" onclick="selector()" style="position:fixed;top:0px;right:0px;z-index:100;">button</button>


$("#asd").html('<object data="" style="width:100%;height:100%;"/>');

function selector()
             $(this).wrap("<div id=\"wrapp\" class=\"wrapp\" style=\"margin:0;padding:0;\"></div>");    
      $(".wrapp").append("<button class=\"hybrid\" style=\"z-index:100;position:absolute;\"></button>");


I have also tried waiting until the page has fully loaded the img tags with no avail. If this can be achieved with simple javascript do tell.

I know trying to run jquery on html that's not yours is tricky and probably looks like a silly idea but there must be a way without having to create a custom chrome plugin app.