javascript - How to display image from another page in my page -
i want start greasemonkey plugin existing page. plugin should fetch , display images automatically, each image different pages.
i thought of using jquery.get("link", function(data)) , hide page , display images on average display 4 images should load 6 webpages present webpage creating delay in loading.
is there other work around create function loads page html of image pages in background or in tab , href of <a> tag's in page, page , load images page?
you can try solution below. put urls want in "pages" array. when script runs, makes ajax calls in background. when ready, searches source returned images , picks 1 randomly. if found, wraps image in link page found (or if available, image's url) , inserts linked image top of body of own current page.
you can try code pasting browser's javascript console , add images current page.
you see demo here: http://jsfiddle.net/3lcj3918/3/
//pages want var pages = [ 'https://en.wikipedia.org/wiki/special:random', 'https://en.wikipedia.org/wiki/special:random', 'https://en.wikipedia.org/wiki/special:random', 'https://en.wikipedia.org/wiki/special:random', 'https://en.wikipedia.org/wiki/special:random' ] //a simple function used make ajax call , run callback target page source argument when successful function getsubpagesource(url, successcallback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { //when source returned, run callback response text successcallback(xhr.responsetext); } }; //requires proxy url cors var proxyurl = 'https://cors-anywhere.herokuapp.com/'; xhr.open('get', proxyurl+url, true); //set headers required proxy xhr.setrequestheader("x-requested-with","xmlhttprequest"); xhr.setrequestheader("access-control-allow-origin","https://cors-anywhere.herokuapp.com/"); xhr.send(); } //a function extract images given url , inserts current page function injectimagesfrom(url) { getsubpagesource(url, function(data) { //trim source code body var bodysource = data.substr(data.indexof('<body ')); //find body tag bodysource = bodysource.substr(bodysource.indexof('>') + 1); //finish removing body open tag bodysource = bodysource.substring(0, bodysource.indexof('</body')); //remove body close tag //create element insert external source var workingnode = document.createelement("span"); //insert source workingnode.innerhtml = bodysource; //find images var allimages = workingnode.getelementsbytagname('img'); //any images? if (allimages.length > 0) { //grab random image var randomindex = math.floor(math.random() * allimages.length); var randomimage = allimages.item(randomindex); //add border randomimage.setattribute('style', 'border: 1px solid red;'); //restrain size randomimage.setattribute('width', 200); randomimage.setattribute('height', 200); //check if parent node link var parentnode = randomimage.parentnode; if (parentnode.tagname == 'a') { //yes, use var imageurl = parentnode.getattribute('href'); } else { //no, use image's page's url var imageurl = url; } //add link pointing image taken var alink = document.createelement("a"); alink.setattribute('href', imageurl); alink.setattribute('target', '_blank'); //insert image link alink.appendchild(randomimage); /* insert page */ //insert image in beginning of body document.body.insertbefore(alink,document.body.childnodes[0]); //remove working node children while (workingnode.firstchild) { workingnode.removechild(workingnode.firstchild); } //unreference workingnode = null; } }); } (var ii = 0, nn = pages.length; ii < nn; ii++) { injectimagesfrom(pages[ii]); }
Comments
Post a Comment