编程语言
首页 > 编程语言> > Javascript-可以将两个小书签和一个Greasemonkey脚本组合成一个小书签吗?如果是这样,怎么办?

Javascript-可以将两个小书签和一个Greasemonkey脚本组合成一个小书签吗?如果是这样,怎么办?

作者:互联网

如果这个问题完全不合适,请原谅我.我对编程一无所知.我知道我应该学习Javascript,但是对于一个外行来说这有点困难.

我有两个书签和一个用户脚本,它们一起可以满足我的需求.但我需要单击,等待,然后单击.可以将它们全部合并为一个书签吗?这适用于Windows XP上的Firefox 5.

第一个小书签会获取页面上指向图像的所有链接,并将所有这些图像显示在新标签的单个页面中:

javascript:(function(){function%20I(u){var%20t=u.split('.'),e=t[t.length-1].toLowerCase();return%20{gif:1,jpg:1,jpeg:1,png:1,mng:1}[e]}function%20hE(s){return%20s.replace(/&/g,'&amp;').replace(/>/g,'&gt;').replace(/</g,'&lt;').replace(/"/g,'&quot;');}var%20q,h,i,z=open().document;z.write('<p>Images%20linked%20to%20by%20'+hE(location.href)+':</p><hr>');for(i=0;q=document.links[i];++i){h=q.href;if(h&&I(h))z.write('<p>'+q.innerHTML+'%20('+hE(h)+')<br><img%20src="'+hE(h)+'">');}z.close();})()

然后启动用户脚本,该脚本将页面标题更改为包括[已加载页面]:

// ==UserScript==
// @name           Add "loaded" to title if page is loaded
// @namespace      my
// @description    Indicate if a page is loaded
// @include        *
// ==/UserScript== 

window.addEventListener(
    'load',
    function (e) {
        document.title += " - [Page loaded]";
    }, 
    false); 

最后,我单击第二个书签,该书签将删除页面中所有小于特定大小的文本和图像,并将其设为黑色背景.希望此部分仅在所有图像都加载后才起作用(因此,从用户脚本中获得“已加载”标题).

我必须将其放入内联代码中,因为其他方法似乎失败了(代码按钮和blockquote都没有做任何事情).如果有人可以帮助我,那就太好了!我自己不能写一行Javascript,也不知道该怎么办.

function wrap(image, href) {
    var img = document.createElement('img');
    var div = document.createElement('div');
    img.src = image.src;
    var node = image.parentNode;
    if (!href) {
        div.appendChild(img);
    } else {
        var a = document.createElement('a');
        a.href = href;
        a.appendChild(img);
        div.appendChild(a);
    }
    return div;
}
function findNext(document) {
    var res = document.evaluate('//a[@rel='
    next ']', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
    if (res.singleNodeValue) {
        return res.singleNodeValue.href;
    } else {
        return null;
    }
}
if ('scrollMaxY' in window) {
    function getScrollMaxY() {
        return window.scrollMaxY;
    }
} else {
    function getScrollMaxY() {
        return document.body.scrollHeight - window.innerHeight;
    }
}
function streamify() {
    var contentDiv = document.createElement('div');
    var imageDiv = document.createElement('div');
    var moreButton = document.createElement('input');
    var style = document.createElement('style');
    var iframe = document.createElement('iframe');
    var errorSpan = document.createElement('span');
    var retryButton = document.createElement('input');
    var currentPageDiv = document.createElement('div');
    var currentPageLink = document.createElement('a');
    var nextUrl = findNext(document);
    var occured = {};
    var images = [];
    var loadTimer = null;
    var scrolledToBottom = false;

    function extract(elem, href, images) {
        switch (elem.localName) {
        case 'a':
            href = elem.href;
            break;
        case 'img':
            if (!(elem.src in occured) && elem.offsetWidth > 250 && elem.offsetHeight > 300) {
                images.push(wrap(elem));
                occured[elem.src] = true;
            }
        }
        var child = elem.firstElementChild;
        while (child) {
            extract(child, href, images);
            child = child.nextElementSibling;
        }
    }
    function loadNext() {
        if (loadTimer !== null) {
            window.clearTimeout(loadTimer);
        }
        if (nextUrl) {
            loadTimer = window.setTimeout(function () {
                errorSpan.style.display = '';
                loadTimer = null;
            }, 30000);
            iframe.src = nextUrl;
        }
    }
    style.type = 'text/css';
    style.appendChild(document.createTextNode('body {background-color: black;color: white;}a {color: white;font-weight: bold;text-decoration: none;}a:hover {text-decoration: underline;}#greasemonkey-image-stream-content {text-align: center;}#greasemonkey-image-stream-content > div > div {margin-top: 2em;margin-bottom: 2em;}#greasemonkey-image-stream-content input {padding: 0.5em;font-weight: bold;}'));
    contentDiv.id = 'greasemonkey-image-stream-content';
    currentPageLink.appendChild(document.createTextNode('current page'));
    currentPageLink.href = window.location.href;
    currentPageDiv.appendChild(currentPageLink);
    moreButton.type = 'button';
    moreButton.value = 'More';
    moreButton.disabled = true;

    function handleMore() {
        currentPageLink.href = iframe.src;
        scrolledToBottom = false;
        errorSpan.style.display = 'none';
        moreButton.disabled = true;
        for (var i = 0; i < images.length; ++i) {
            imageDiv.appendChild(images[i]);
        }
        images = [];
        loadNext();
    }
    moreButton.addEventListener('click', handleMore, false);
    retryButton.type = 'button';
    retryButton.value = 'Retry';
    retryButton.addEventListener('click', function (event) {
        loadNext();
        errorSpan.style.display = 'none';
    }, false);
    errorSpan.style.fontWeight = 'bold';
    errorSpan.style.color = 'red';
    errorSpan.style.display = 'none';
    errorSpan.appendChild(document.createTextNode(' Load Error '));
    errorSpan.appendChild(retryButton);
    iframe.style.width = '0px';
    iframe.style.height = '0px';
    iframe.style.visibility = 'hidden';
    iframe.addEventListener('load', function (event) {
        if (loadTimer !== null) {
            window.clearTimeout(loadTimer);
        }
        errorSpan.style.display = 'none';
        nextUrl = findNext(iframe.contentDocument);
        extract(iframe.contentDocument.body, null, images);
        if (images.length == 0 && nextUrl) {
            loadNext();
            moreButton.disabled = true;
        } else {
            moreButton.disabled = !nextUrl && images.length == 0;
            if (scrolledToBottom && (nextUrl || images.length > 0)) {
                handleMore();
            }
        }
    }, false);
    extract(document.body, null, images);
    for (var i = 0; i < images.length; ++i) {
        imageDiv.appendChild(images[i]);
    }
    images = [];
    contentDiv.appendChild(style);
    contentDiv.appendChild(currentPageDiv);
    contentDiv.appendChild(imageDiv);
    contentDiv.appendChild(moreButton);
    contentDiv.appendChild(errorSpan);
    contentDiv.appendChild(iframe);
    var elem = document.documentElement.firstElementChild;
    while (elem) {
        switch (elem.localName) {
        case 'head':
            var child = elem.firstElementChild;
            while (child) {
                var next = child.nextElementSibling;
                if (child.localName != 'title') {
                    elem.removeChild(child);
                }
                child = next;
            }
            break;
        case 'body':
            while (elem.firstChild) {
                elem.removeChild(elem.firstChild);
            }
        }
        elem = elem.nextElementSibling;
    }
    window.addEventListener('scroll', function (event) {
        if (window.scrollY >= getScrollMaxY()) {
            scrolledToBottom = true;
            moreButton.click();
        }
    }, false);
    document.body.appendChild(contentDiv);
    loadNext();
}
streamify();
void(0)

解决方法:

(function(){
  var a=Array.filter(document.getElementsByTagName('a'),function(e){
    var h=e.href.split('.').pop().toLowerCase();
    return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[h];
  }),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
  b.innerHTML='';
  b.style.background='#000';
  b.style.color='#ddd'
  for(i;i<l;i++){
    var t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
    s.innerHTML=t;
    p.src=t;
    b.appendChild(p);
    b.appendChild(s);
  }
})()

在这里它被压缩

javascript:(function(){var c=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0],b=0,g=c.length;a.innerHTML="";a.style.background="#000";a.style.color="#ddd";for(b;b<g;b++){var d=c[b].href,e=document.createElement("img"),f=document.createElement("div");f.innerHTML=d;e.src=d;a.appendChild(e);a.appendChild(f)}})();

等待每个图像加载的图像.添加了错误检测.

(function(){
  var a=Array.filter(document.getElementsByTagName('a'),function(e){
    return {gif:1,jpg:1,jpeg:1,png:1,mng:1}[e.href.split('.').pop().toLowerCase()];
  }),b=document.getElementsByTagName('body')[0],i=0,l=a.length;
  b.innerHTML='';
  b.style.background='#000';
  b.style.color='#ddd'
  add(0);
  function add(i){
    var img=new Image(),t=a[i].href,p=document.createElement('img'),s=document.createElement('div');
    img.src=t;
    img.onload=function(){
      s.innerHTML=t;
      p.src=t;
      b.appendChild(p);
      b.appendChild(s);
      ++i<a.length?add(i):'';
    };
    img.onerror=function(){
      ++i<a.length?add(i):'';
    };
  }
})()

和缩小版.

javascript:(function(){function d(b){var e=new Image,c=f[b].href,g=document.createElement("img"),h=document.createElement("div");e.src=c;e.onerror=function(){++b<f.length&&d(b)};e.onload=function(){h.innerHTML=c;g.src=c;a.appendChild(g);a.appendChild(h);++b<f.length&&d(b)}}var f=Array.filter(document.getElementsByTagName("a"),function(a){return{gif:1,jpg:1,jpeg:1,png:1,mng:1}[a.href.split(".").pop().toLowerCase()]}),a=document.getElementsByTagName("body")[0];a.innerHTML="";a.style.background="#000";a.style.color="#ddd";d(0)})();

这是一些测试HTML

<a href='http://mozcom-cdn.mozilla.net/img/covehead/about/logo/download/logo-only-preview.png'>Firefox</a>
<a href='http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/ie-logo-small.png'>IE</a>
<a href='http://code.google.com/tv/images/chrome-logo.png'>Chrome</a>

我没有在图像尺寸上添加限制器,因为我不确定是否有必要,并且不确定您想要什么尺寸限制.

标签:bookmarklet,firefox,greasemonkey,javascript
来源: https://codeday.me/bug/20191102/1990971.html