從不同的頁面使用JS獲取圖片來源網址

我試圖從一個頁面抓取圖片的來源網址，並在另一頁中使用它們的一些JavaScript。我知道如何使用JQuery .load（）來插入圖像。然而，我不想加載所有的圖像並將它們顯示在頁面上，而是想抓取源URL，以便在JS數組中使用它們。

1僅僅是一個圖片頁面：

<html> 
    <head> 
    </head> 
    <body> 
    <img id="image0" src="image0.jpg" /> 
    <img id="image1" src="image1.jpg" /> 
    <img id="image2" src="image2.jpg" /> 
    <img id="image3" src="image3.jpg" /> 
    </body> 
</html>

第2頁包含我的JS。（請注意，最終目標是將圖像加載到數組中，隨機化它們，並使用cookie，每10秒在頁面加載時顯示一個新圖像，所有這些工作都正常，但不是將圖像路徑硬編碼到JavaScript中如下圖所示，我更願意採取基於其ID 1的路徑。通過這種方式，圖像不會總是需要名爲「image1.jpg」等）

<script type = "text/javascript"> 
     var days = 730; 
     var rotator = new Object(); 
     var currentTime = new Date(); 
     var currentMilli = currentTime.getTime(); 
     var images = [], index = 0; 
     images[0] = "image0.jpg"; 
     images[1] = "image1.jpg"; 
     images[2] = "image2.jpg"; 
     images[3] = "image3.jpg"; 
     rotator.getCookie = function(Name) { 
      var re = new RegExp(Name+"=[^;]+", "i"); 
      if (document.cookie.match(re)) 
       return document.cookie.match(re)[0].split("=")[1]; 
       return''; 
     } 
     rotator.setCookie = function(name, value, days) { 
      var expireDate = new Date(); 
      var expstring = expireDate.setDate(expireDate.getDate()+parseInt(days)); 
      document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"; 
     } 
     rotator.randomize = function() { 
      index = Math.floor(Math.random() * images.length); 
      randomImageSrc = images[index]; 
     } 
     rotator.check = function() { 
      if (rotator.getCookie("randomImage") == "") { 
       rotator.randomize(); 
       document.write("<img src=" + randomImageSrc + ">"); 
       rotator.setCookie("randomImage", randomImageSrc, days); 
       rotator.setCookie("timeClock", currentMilli, days); 
      } 
      else { 
       var writtenTime = parseInt(rotator.getCookie("timeClock"),10); 
       if (currentMilli > writtenTime + 10000) { 
        rotator.randomize(); 
        var writtenImage = rotator.getCookie("randomImage") 
        while (randomImageSrc == writtenImage) { 
         rotator.randomize(); 
        } 
        document.write("<img src=" + randomImageSrc + ">"); 
        rotator.setCookie("randomImage", randomImageSrc, days); 
        rotator.setCookie("timeClock", currentMilli, days); 
       } 
       else { 
        var writtenImage = rotator.getCookie("randomImage") 
        document.write("<img src=" + writtenImage + ">"); 
       } 
      } 
     } 
     rotator.check() 
    </script>

燦任何人都指向正確的方向？我的直覺是使用JQuery .get（），但到目前爲止我一直沒有成功。

請讓我知道，如果我可以澄清！

來源

2012-10-08 SDD

您不能使用get（）函數與純html作爲目標。 – Radi

感謝您的幫助。我還沒有嘗試過太多與不用彷徨 - 只是爲了看看我是否可以從另一個網頁挑出IMG SRC： $獲得（「page1.html」，函數（數據）{ \t \t \t \t VAR imageonly = $（數據）.attr（「SRC」）;。 \t \t \t $（ '結果'）HTML（imageonly）; \t \t \t}）; 但是這真的離我想要的還有很遠，就是將它加載到上面的JS中。對不起，我對JS/JQ很陌生。 – SDD

您有使用cookies的原因嗎？爲什麼不使用'setInterval'？ – saml

試試這個。

<script> 
$.get('http://path/to/page/1', function(data) { 
    var imgs = $('<div/>').html(data).find('img'); 
    imgs.each(function(i, img) { 
     alert(img.src); // show a dialog containing the url of image 
    }); 
}); 
</script>

來源

2012-10-08 21:29:35 mukama

這很酷，跑去學習如何玩$ .get（） –

謝謝 - 我認爲這可以工作！但是，我不知道如何將圖像加載到我的數組中。有什麼建議？ – SDD

您可以使用推送功能將數據追加到圖像數組;像這樣>> images.push（img.src）; – mukama

我不明白你爲什麼要爲此使用cookies。你應該得到page1，找到圖像，然後使用setInterval來更新src。

$.get('page1.html', function(data, status) { // get the page with the images 
    var parser = new DOMParser(); 
    var xmldoc = parser.parseFromString(data, "text/html"); //turn it into a dom 

    var imgs = xmldoc.getElementsByTagName('img'); //get the img tags 
    var imageSrcs = Array.prototype.slice.call(imgs).map(function(img) { 
     return img.src; //convert them to an array of sources 
    }); 

    setInterval(function() { // run this every 10 seconds 
     var imags = document.getElementsByTagName('img'); // find the images on this page 
     Array.prototype.slice.call(imgs).forEach(function(img) { 
      var imgSrc = Math.floor(Math.random()*imageSrcs.length); //get a random image source 
      img.src = imageSrcs[imgSrc]; //set this image to the src we just picked at random 
     }); 
    }, 10000); 

}, 'html');

來源

2012-10-08 21:26:39 saml

爲什麼不使用ajax？您可以將包含所有圖像的外部頁面部分加載到隱藏的容器中，然後通過回調推斷出您需要的信息。

external.html

<html> 
.... 
    <div id="imgContainer"> 
     <img id="image0" src="image0.jpg" /> 
     <img id="image1" src="image1.jpg" /> 
     <img id="image2" src="image2.jpg" /> 
     <img id="image3" src="image3.jpg" /> 
    </div> 
</html>

ajax.js

function ajaxContent(reg, extReg) { 

var toLoad = 'external.html' + extReg; 

function loadContent() { 
    $(reg).load(toLoad,'',getSrcPaths()) 
} 

function getSrcPaths() { 
    $(reg + ' #image0').delay(200).fadeIn('slow'); 
    $(reg + ' #image1').delay(200).fadeIn('slow'); 
    // or however you want to store/display the images 
} 
}

然後onload事件剛剛做出ajaxContent東西調用，比如

<body onload="ajaxContent('#hiddenContainer','#imgContainer')"> 
    .... 
</body>

這當然不是真正相關的，如果你的圖像很大或者頁面加載受到負面影響。雖然現在你實際上已經有了圖像，但你甚至可以只顯示它們而不是隱藏它們。取決於你想要操作原稿的準確程度。

來源

2012-10-08 21:35:20

謝謝，邁克。我想過把它們加載到隱藏的容器中，但恐怕圖像可能會太大。 – SDD

從不同的頁面使用JS獲取圖片來源網址

回答

相關問題