如何在我的页面中显示来自另一个页面的图像

-2

我想要启动一个到现有页面的greasemonkey插件。该插件应自动获取并显示一些图像，每个图像来自不同的页面。如何在我的页面中显示来自另一个页面的图像

我想用jQuery.get("link", function(data))的和隐藏的页面和显示图像仅但平均来显示4个图像I应加载网页6到本网页它被创建在载的延迟。

是否有任何其他的解决办法，以创建加载背景或在另一个选项卡中的所有图像的页面的HTML页面的功能，并在该页面获得<a>标签的的href，进入我的页面，只加载图像到我的页面？

2015-06-19 ravi shankar divvela

您可以尝试下面的解决方案。 只需在“pages”数组中放入所需的网址即可。当脚本运行时，它会在后台进行Ajax调用。准备好后，它会搜索返回的图像源并随机选取一个。如果找到，它会将图像封装到指向它的页面的链接（或可用的图像的url）中，并将链接的图像插入到您当前页面正文的顶部。

您可以将代码粘贴到浏览器的JavaScript控制台中进行试用，它会将图像添加到当前页面。

你也可以看到这里演示：http://jsfiddle.net/3Lcj3918/3/

//pages you 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 to make an ajax call and run a callback with the target page source as an 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 with the response text 
      successCallback(xhr.responseText); 
     } 
    }; 

    //requires a proxy url for CORS 
    var proxyURL = 'https://cors-anywhere.herokuapp.com/'; 

    xhr.open('GET', proxyURL+url, true); 

    //set headers required by proxy 
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"); 
    xhr.setRequestHeader("Access-Control-Allow-Origin","https://cors-anywhere.herokuapp.com/"); 
    xhr.send(); 
} 

//a function that extract images from given url and inserts into current page 
function injectImagesFrom(url) 
{ 
    getSubPageSource(url, function(data) 
    { 
     //trim source code to body only 
     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 an element to insert external source 
     var workingNode = document.createElement("span"); 
     //insert source 
     workingNode.innerHTML = bodySource; 

     //find all 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 is a link 
      var parentNode = randomImage.parentNode; 
      if (parentNode.tagName == 'A') 
      { 
       //yes, use it 
       var imageURL = parentNode.getAttribute('href'); 
      } 
      else 
      { 
       //no, use image's page's url 
       var imageURL = url; 
      } 

      //add a link pointing to where image was taken from 
      var aLink = document.createElement("a"); 
      aLink.setAttribute('href', imageURL); 
      aLink.setAttribute('target', '_blank'); 

      //insert image into link 
      aLink.appendChild(randomImage); 

      /* INSERT INTO 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; 
     } 
    }); 
} 

for (var ii = 0, nn = pages.length; ii < nn; ii++) 
{ 
    injectImagesFrom(pages[ii]); 
}

来源

2015-06-19 08:09:25

我编辑的代码来获取链接的图像被包裹在过，如果有的话。 –

首先感谢您的回复，似乎您正确理解了我的问题。但是我的页面是“https”，所以它给你的代码带来了一些交叉产生的问题，但正如我在我的问题中提到的“get function”对我来说工作正常，你可以在你的任何编辑中使用它，因此可以使用full或me 。 –

好的，完成了！我发现了另一个允许使用SSL的CORS代理。我编辑了上面的代码，并将jsfiddle链接更改为新的演示。请善举投票并接受我的回答。谢谢！ –

如何在我的页面中显示来自另一个页面的图像

回答

相关问题