javascript - 使用 JS 从不同页面获取图像源 URL

标签 javascript ajax jquery

大家:

我试图从一个页面获取图像的源 URL,并在另一个页面的某些 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。 (请注意,最终目标是将图像加载到数组中,随机化它们,并使用 cookies,每 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(),但到目前为止我还没有成功。

如果我可以澄清,请告诉我!

最佳答案

试试这个。

<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>

关于javascript - 使用 JS 从不同页面获取图像源 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12789358/

相关文章:

php - 单击链接时,HTML 将输入文本字段值连接到 href

javascript - 如何使用console.log打印出哪个函数调用了一段代码?

javascript - 使背景元素和 div 图像保持一致

javascript - Fetch 未从 302 重定向调用中检索响应

javascript - Highcharts 系列点击事件在第一次点击时不会触发

javascript - snap/raphael/svg - 获取一点的 Angular (不是长度)?

javascript - Ajax 选择输入点击 : Fill options from Ajax response

jquery - 最佳性能 + jQuery Ajax + Div 刷新

jquery - 在简单模式+细长滚动中第二次访问时不显示滚动按钮

javascript - 在嵌套 iframe 内使用/安装库