如何從另一頁獲取第一張圖片？

-1

所以我有一個頁面（www.domain.co.uk/index.html），我需要從另一個頁面（www.domain.co.uk/photos.html）獲得的圖像的URL如何從另一頁獲取第一張圖片？

在www.domain.co.uk/photos.html裏面我有一大堆照片。

圖像的例子;其中foo，bar，baz和qux是完全不同的字符串：

<tr> 
<th width="697" scope="col"> 
<div id="qux"> 
<a href="foo" target="_blank"><img src="bar.jpg" alt="" width="700" height="525" class="baz"></a> 
</div> 
</th> 
</tr>

我怎樣才能針點之一，使用JavaScript獲取的URL www.domain.co.uk/index.html？

我能加個班photo是像這樣每個圖像是一樣的：

<tr> 
<th width="697" scope="col"> 
<div id="qux"> 
<a href="foo" target="_blank"><img src="bar.jpg" alt="" width="700" height="525" class="baz photo"></a> 
</div> 
</th> 
</tr>

，然後鏈接到類.photo和檢索從URL www.domain.co.uk/photos.html

我知道如何用當前的URL來完成它。

$('.photo').attr('href')

但你如何在另一個網址上執行該操作？

來源

2014-04-30 maxisme

可以使一個AJAX調用此頁的選擇與第一圖像鏈接一些JavaScript，但它是沉重的只是一個鏈接IMG不 – ekans

清楚..你想顯示從photo.html頁面圖像索引或其他東西？ – Rubyist

你會使用jQuery嗎？這可以用它輕鬆完成。 – blint

這段代碼適用於我。

警告框寫着：http://localhost/enhzflep/img/catSource.jpg

摘自imageThreshold.html

<body> 
    <img id='srcImg' src='img/catSource.jpg'/> <input type='range' min='0' max='255' id='thresholdSlider'/><span id='sliderVal'>128</span> 
    <canvas id='dstCanvas'></canvas> 
</body>

從測試摘錄。HTML

function newEl(tag){return document.createElement(tag);} 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    myAjaxRequest("http://localhost/enhzflep/imageThreshold.html", onHtmlLoaded); 
} 

function onHtmlLoaded(ajax) 
{ 
    var div = newEl('div'); 
    div.innerHTML = ajax.responseText; 
    var imgs = div.getElementsByTagName('img'); 
    alert(imgs[0].src); 
} 


function myAjaxRequest(url, callback) 
{ 
    var ajax = new XMLHttpRequest(); 
    ajax.onreadystatechange = function() 
    { 
     if (this.readyState==4 && this.status==200) 
      callback(this); 
    } 
    ajax.onerror = function() 
    { 
     console.log("AJAX request failed to: " + url); 
    } 
    ajax.open("GET", url, true); 
    ajax.send(); 
}

來源

2014-04-30 14:09:19 enhzflep

我只是不斷在'alert（imgs [0] .src）中更改數字;'爲了找到正確的圖像 – maxisme

我得到錯誤'No'Access-Control-Allow-Origin'標題出現在請求的資源上。 ' – maxisme

然後，您需要（a）從同一來源請求資源或（b）設置標題，以便允許跨源請求。在內容交付網絡（CDN）的情況下，任何人通常都可以通過自己的服務器上的腳本請求資源。但是，如果你有一個在example.com上運行的頁面，並且你想從example2.com得到一個頁面，它將無法工作，除非example2.com在頁眉中設置了正確的字段。谷歌的「否」訪問控制允許「標題」應該給你更多的知識和洞察力比我所能做的。 SO上有很多問題可以解決這個問題。 :) – enhzflep

的sessionStorage：

使用的sessionStorage與jQuery可以節省參數，後來在任何頁面中使用它。

var img = $('.photo').attr('src') 
sessionStorage.setItem("imgurl", img);

，並採取保存的信息在任何頁面

var x = sessionStorage.getItem("imgurl"); 
$('.photo').attr('src',x);

來源

2014-04-30 13:57:39

這會得到第一個圖像的src：

$(pagehtml).find('img').first().attr('src');

如果有這將讓你的第一個圖像的鏈接，錯誤如果它沒有鏈接：

var t = $(pagehtml).find('img').first().closest('a'); 
if(!t.length) 
    console.error('first image does not have a link') 
else 
    alert(t.attr('href')); // first image's link

這將讓你有鏈接，而忽略那些沒有任何鏈接的圖像第一個圖像：

var t = $(pagehtml).find('a[href] img').first(); 
if(!t.length) 
    console.error('there\'s no image with a link in this page'); 
else 
    alert(t.closest('a').attr('href'));

$(pagehtml)應包含你的目標頁面解析HTML代碼。要得到那個用途：

$.ajax({ url:'photos.html', complete:function(r){ 

    var pagehtml = r.respnseText; 
    $(pagehtml).find('...'); 
    // ... 

} });

來源

2014-04-30 14:00:23

如何從另一頁獲取第一張圖片？

回答

相關問題