Как да генерирам QR-кодове за постоянни връзки във форуми?

Бих искал да използвам QR-кодове, за да рационализирам сърфирането в определени форуми с моя смартфон с Android.

Търся скрипт Greasemonkey, който поставя QR код до всяка постоянна връзка, на всяка публикация, във форумна нишка.

Имам малко шаблон, по който да работя, QR скрипта за споделяне на YouTube:

var shareBoxCheckInterval   = setInterval (AddQR_Code, 200);

function AddQR_Code () {
var shareDiv    = document.querySelector ('.share-option-container .ytg-box');
if (shareDiv) {
    var qrIMG   = 'http://chart.googleapis.com/chart?chl=' 
                + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125';
    var img     = document.createElement ('img');
    img.src     = qrIMG;
    img.width   = 125;
    img.height  = 125;
    shareDiv.appendChild (img);
    clearInterval (shareBoxCheckInterval);
    }
}

Това, което прави, е, че добавя QR код към полето за споделяне на Youtube, така:

Примерен резултат от Qr код

за лесно прехвърляне на видео от компютър към телефон.

Как да адаптирам този код да работи с постоянни връзки във форума и да заменя текста на връзката с изображение на QR код?

Например в тази тема във форума на Minecraft, има малка връзка в горния десен ъгъл на всяка публикация, казваща „#1“, „#2“, „#3“, ad infinitum -- която препраща към тази конкретна публикация.

Това, което би направил потребителският скрипт, е да замени текста, казващ „#1“ с изображение на QR код (генерирано от API на Google), свързващо тази публикация, като същевременно е изображение на хипервръзка, върху което може да се щракне (също се свързва с тази публикация).

След това ще повтори това за всяка постоянна връзка на страницата.

Би ли било възможно това и ако да, как?


person mickdekkers    schedule 01.09.2012    source източник
comment
Да, трябва да е възможно. (1) Използвайте querySelectorAll() или jQuery, за да получите списък с връзки към публикации. (2) Преминете през този списък, извиквайки AddQR_Code() -- но модифициран да използва href на връзката вместо location.href.   -  person Brock Adams    schedule 02.09.2012
comment
Само два въпроса, 1: как ще знае къде да ПРЕМЕНИ QR кода? 2: как да направя QR изображението така, че да продължава да води към постоянната връзка, когато щракна върху него?   -  person mickdekkers    schedule 02.09.2012
comment
(1) Ще бъде поставен спрямо елемента от списъка. Търсене на DOM преминаване. (2) Не бихте просто вмъкнали изображение, бихте го увили във връзка.   -  person Brock Adams    schedule 02.09.2012


Отговори (1)


Добре, ето пълен скрипт, който преминава през отметките на публикациите и добавя QR кодове.

Оставих номерата на постовете, защото са ми полезни във форумите, които използвам. Ако наистина искате да изчезнат, добавете $(this).text (" "); точно преди реда $(this).append (....

Обърнете внимание на използването на CSS за стилизиране (добро), а не за атрибути на тагове (зло).

Скриптът е малко сложен, тъй като се нуждае от структурата withPages_jQuery, за да стане съвместим с Google Chrome (както е посочено от userscripts етикет).

// ==UserScript==
// @name        _Minecraft Forum, post barcodizer
// @namespace   _pc
// @include     http://www.minecraftforum.net/topic/*
// @grant       GM_addStyle
// ==/UserScript==

function GM_scriptMain ($) {
    var postBkMarks = $("div.post_block div.post_wrap h3 span.post_id a");
    postBkMarks.each ( function () {
        var qrIMG   = 'http://chart.googleapis.com/chart?chl='
                    + encodeURIComponent (this.href)
                    + '&chld=M%7C0&cht=qr&chs=125x125'
                    ;
        $(this).append ('<img src="' + qrIMG + '">');
    } );
}

withPages_jQuery (GM_scriptMain);

GM_addStyle (
    "h3 span.post_id a img {width: 125px; height: 125px;}"
);

function withPages_jQuery (NAMED_FunctionToRun) {
    //--- Use named functions for clarity and debugging...
    var funcText        = NAMED_FunctionToRun.toString ();
    var funcName        = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1");
    var script          = document.createElement ("script");
    script.textContent  = funcText + "\n\n";
    script.textContent += 'jQuery(document).ready(function() {'+funcName+'(jQuery);});';
    document.body.appendChild (script);
};

(Работи в FF/GM, Chrome, Tampermonkey и други браузъри).



Версията Firefox (Greasemonkey) - само (и вероятно Tampermonkey) е по-проста:

// ==UserScript==
// @name        _Minecraft Forum, post barcodizer
// @namespace   _pc
// @include     http://www.minecraftforum.net/topic/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==

var postBkMarks = $("div.post_block div.post_wrap h3 span.post_id a");
postBkMarks.each ( function () {
    var qrIMG   = 'http://chart.googleapis.com/chart?chl='
                + encodeURIComponent (this.href)
                + '&chld=M%7C0&cht=qr&chs=125x125'
                ;
    $(this).append ('<img src="' + qrIMG + '">');
} );

GM_addStyle (
    "h3 span.post_id a img {width: 125px; height: 125px;}"
);
person Brock Adams    schedule 02.09.2012
comment
МНОГО БЛАГОДАРЯ! :D Просто имам още няколко въпроса :P 1) Как да направя така, че да не измества цялата информационна лента надолу? (Това кара текста „Публикувано на 04 август и т.н.“ понякога да бъде припокрива се от големи шрифтове) 2) Възможно ли е да има текстово поле, посочващо номера на публикацията, когато се движите върху QR с мишката ? и 3) Има грозна малка бяла зона около всеки QR, това дело на Google ли е или мога да го премахна? - person mickdekkers; 02.09.2012
comment
По принцип, правейки го да изглежда като това Между другото, благодаря за редакцията, бях малко уморих се, когато го написах :) О, и да, за да можете да видите припокриването, очевидно трябва да имате активиран скрипт ›.‹ - person mickdekkers; 02.09.2012
comment
Моля. Що се отнася до вашите допълнителни въпроси, те са допълнителни въпроси, които не попадат в обхвата на този въпрос. Става досадно, когато се натрупват твърде много поръчки за промяна... ами всичко, наистина. Елемент 1 и 2 са повече проблеми с CSS и HTML. Елемент 3 е работа на Google (и може би е необходим за правилното функциониране на QR кодовете, може би) -- но може да бъде подобрен с CSS. ... И така, маркирайте този въпрос като отговорен (както е, както е зададен първоначално). След това задайте елементи 1-3 в нов въпрос за HTML/CSS/Greasemonkey(и/или)Userscripts. Ще го видя (както и другите, които могат да отговорят). - person Brock Adams; 03.09.2012