Question

我想在现有页面上启动一个greasemonkey插件。该插件应自动获取并显示一些图像，每个图像来自不同的页面。

我想使用 jQuery.get("link", function(data)) 并隐藏页面并仅显示图片，但平均显示4张图片我应该将6个网页加载到当前网页中，这会造成延迟负荷。

是否还有其他方法可以创建一个函数来加载背景或其他标签中所有图片页面的页面html，并获得 {{1}的 href 那个页面中的标签，进入我的页面，只将图像加载到我的页面中？

Answer 1

您可以在下面尝试此解决方案。 只需将所需的URL放在“pages”数组中即可。当脚本运行时，它会在后台进行Ajax调用。当它们准备就绪时，它会搜索返回的图像源并随机选择一个。如果找到，它会将图像包装到找到它的页面的链接中（或者如果可用的话，图像的URL），并将链接的图像插入到您当前页面正文的顶部。

您可以通过将代码粘贴到浏览器的JavaScript控制台来试用代码，然后将图像添加到当前页面。

您还可以在此处看到演示：http://jsfiddle.net/3Lcj3918/3/

//pages you want
var pages =
[
    'https://en.wikipedia.org/wiki/Special:Random',
    'https://en.wikipedia.org/wiki/Special:Random',
    'https://en.wikipedia.org/wiki/Special:Random',
    'https://en.wikipedia.org/wiki/Special:Random',
    'https://en.wikipedia.org/wiki/Special:Random'
]

//a simple function used to make an ajax call and run a callback with the target page source as an argument when successful
function getSubPageSource(url, successCallback)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState == 4 && xhr.status == 200)
        {
            //when source returned, run callback with the response text
            successCallback(xhr.responseText);
        }
    };

    //requires a proxy url for CORS
    var proxyURL = 'https://cors-anywhere.herokuapp.com/';

    xhr.open('GET', proxyURL+url, true);

    //set headers required by proxy
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");
    xhr.setRequestHeader("Access-Control-Allow-Origin","https://cors-anywhere.herokuapp.com/");
    xhr.send();
}

//a function that extract images from given url and inserts into current page
function injectImagesFrom(url)
{
    getSubPageSource(url, function(data)
    {
        //trim source code to body only
        var bodySource = data.substr(data.indexOf('<body ')); //find body tag
        bodySource = bodySource.substr(bodySource.indexOf('>') + 1); //finish removing body open tag
        bodySource = bodySource.substring(0, bodySource.indexOf('</body')); //remove body close tag

        //create an element to insert external source
        var workingNode = document.createElement("span");
        //insert source
        workingNode.innerHTML = bodySource;

        //find all images
        var allImages = workingNode.getElementsByTagName('img');

        //any images?
        if (allImages.length > 0)
        {
            //grab random image
            var randomIndex = Math.floor(Math.random() * allImages.length);
            var randomImage = allImages.item(randomIndex);
            //add border
            randomImage.setAttribute('style', 'border: 1px solid red;');
            //restrain size
            randomImage.setAttribute('width', 200);
            randomImage.setAttribute('height', 200);

            //check if parent node is a link
            var parentNode = randomImage.parentNode;
            if (parentNode.tagName == 'A')
            {
                //yes, use it
                var imageURL = parentNode.getAttribute('href');
            }
            else
            {
                //no, use image's page's url
                var imageURL = url;
            }

            //add a link pointing to where image was taken from
            var aLink = document.createElement("a");
            aLink.setAttribute('href', imageURL);
            aLink.setAttribute('target', '_blank');

            //insert image into link
            aLink.appendChild(randomImage);

            /* INSERT INTO PAGE */

            //insert image in beginning of body
            document.body.insertBefore(aLink,document.body.childNodes[0]);

            //remove working node children
            while (workingNode.firstChild) {
                workingNode.removeChild(workingNode.firstChild);
            }
            //unreference
            workingNode = null;
        }
    });
}

for (var ii = 0, nn = pages.length; ii < nn; ii++)
{
    injectImagesFrom(pages[ii]);
}

如何在我的页面中显示另一页面的图像

1 个答案: