Question

所以我有一个页面（www.domain.co.uk/index.html），我需要从另一个页面获取图像的网址（www.domain.co.uk/photos.html)

在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固定第一个并获取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并从网址www.domain.co.uk/photos.html

中检索

我知道如何使用当前网址。

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

但是你如何在另一个网址上执行该操作呢？

Answer 1

这将获得第一张图片的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('...'); 
    // ...

 } });

Answer 2

此代码适用于我。

警告框显示：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>

摘自test.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();
}

Answer 3

的sessionStorage：

将sessionstorage与jquery一起使用，您可以保存参数并在以后的任何页面中使用它。

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

并在任何页面中保存已保存的信息

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

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

3 个答案: