Как генерировать 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» и так до бесконечности, которая ссылается на этот конкретный пост.

Что будет делать пользовательский скрипт, так это заменить текст с надписью «# 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 (как указано в пользовательские скрипты).

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