如何从另一页获取第一张图片？

-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

如何从另一页获取第一张图片？

回答

相关问题