javascript - 如何使用 ajax 加载背景图片 url？

Question

您好，是否可以使用 ajax 从不同页面获取背景图像 url？我试过这个，但似乎不起作用。谢谢你的帮助。

var test = jQuery('#el').load('https://www.example.com/somepage/' .some-element).css('background-image');
console.log(test);

或者

jQuery.ajax({
        url: 'https://www.example.com/somepage/',
        type: 'get',
        dataType: 'text',
        success: function(data, status) {
            console.log("Status: "+status+"\nData: "+data);
            result = data;
            var img = jQuery('.some-element').css('background-image');
            console.log(img);
        }
});

两者都是一样的。如何使用 javascript 从另一个页面获取背景图像 url？

标签： javascriptjqueryajax

Answer 1

它不是 ajax，而是您可能需要的解决方案。

function loadBackground(url, query) {
    return new Promise(function (resolve, reject) {
        var iframe = document.createElement("iframe");
        iframe.onload = function () {
            var el = iframe.contentDocument.querySelector(query);
            if (el) {
                var style = iframe.contentWindow.getComputedStyle(el);
                resolve(style.getPropertyValue("background-image"));
            } else {
                reject(new Error("Element not found"));
            }
            document.body.removeChild(iframe);
        };
        iframe.style.width = 0;
        iframe.style.height = 0;
        iframe.style.border = 0;
        iframe.src = url;
        document.body.appendChild(iframe);
    });
}

loadBackground("https://www.example.com/somepage/", ".some-element").then(function (bg) {
    console.log(bg);
});