如何在我的頁面中顯示來自另一個頁面的圖像

-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鏈接更改爲新的演示。請善舉投票並接受我的回答。謝謝！ –

如何在我的頁面中顯示來自另一個頁面的圖像

回答

相關問題